All geek questions in one place

Css div not aligning properly

I have some pretty simple CSS that doesn't seem to work correctly ...

html, body { border:0; margin:0; padding:0; } body { font:12px Arial, Helvetica, sans-serif; background: url(../img/bg-tile.png) repeat; color: #444} .content{ background-color:#CCDDEE; width:100%; margin: 0px auto; } .column{ padding:0% 2% 0% 0%; width:29%; float:left; height:auto; } .myText{ padding:0px 25% 0px 0px; font-size:16px; } .footer{ margin-bottom:2%; padding:0px; position: absolute; } .wrapper { width:75%; height:auto; margin:1% auto; }

My html looks like this:

 <body> <div class="wrapper"> <img src="img/logo2.jpg" alt="" /> <!--Snipped some code Just a nav --> <br /><br /> <div class="content"> <img src="img/slider6.jpg" alt="" /><br /><br /> <div class="column"> <p class="myText"> Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, </p> </div> <div class="column"> <p class="myText"> Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, </p> </div> <div class="column"> <p class="myText"> Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, Testing some text, </p> </div> </div> <br /> </div> <div class="footer"> &copy;2013 blahblahblah&reg; | Terms of Use | Privacy Policy | Press Inquiries </div> </body> </html>

The problem I am facing is that my leg sits on top of my “columns” like this (image comes in)

Text overlap

+4
source share
1 answer

Adding overflow:hidden; in .content will make .content correctly contain floating elements. This will also make the background color apply to floating columns.

If you don't want .content contain floating elements, add overflow:hidden; in .wrapper .

The problem you see is related to float in columns. CSS float takes the element out of the normal flow, and therefore the height of the contained element does not take into account the height of the floated element when rendering.

Therefore, the footer will be displayed after the content (correctly), but .content has the wrong height.

An alternative way to do this is: clear floating content - see http://css-tricks.com/snippets/css/clear-fix/ and What methods of 'clearfix can I use?

+1
source

Source: https://habr.com/ru/post/1485149/

More articles:


All Articles