Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css background color with floating elements

Tags:

Let's say we have this very simple scenario

 <div class="content">     <div class="left">        <p>some content</p>     </div>     <div class="right">        <p>some content</p>     </div>  </div>   <div class="content">     <div class="left">        <p>some content</p>     </div>     <div class="right">        <p>some content</p>     </div>  </div> 

And this is the styling:

 .content {     width: 960px;     height: auto;     margin: 0 auto;     background: red;     clear: both;  }   .left {      float: left;      height: 300px;      background: green;  }   .right {      float: right;      background: yellow;  } 

And the thing is... when I add content to <div class="right"> it should pull down the parent div, and we need to see the red background... the thing is, I cannot see the red background fill all the height.

EDIT: here is a fiddle to test

like image 218
andresmijares Avatar asked Nov 24 '13 19:11

andresmijares


1 Answers

When the children elements are floated, they are taken out of the flow of the document. In doing so, the parent no longer has defined dimensions, as the children aren't technically occupying space. Thus, the parent element collapses upon itself. The same thing occurs when absolutely positioning the children elements too.

In this instance, we can fix it by adding overflow:hidden to the parent element, thus forcing it to contain the children elements. Alternatively overflow:auto works just as well. Some may suggest it is even better than overflow:hidden as you will be able to tell if any calculations are off.

jsFiddle example

.content {     overflow:hidden; } 

Now the parent element is no longer collapsed and the red background is visible.

You could alternatively use a clearfix if you are looking for support in older browsers, but I don't recommend doing so.

like image 108
Josh Crozier Avatar answered Oct 05 '22 23:10

Josh Crozier