25

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

Cœur
  • 37,241
  • 25
  • 195
  • 267
andresmijares
  • 3,658
  • 4
  • 34
  • 40

6 Answers6

60

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.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • Yeah, maybe first option would be to use a clearfix, however it was a question I got asked on an interview and I had not choice to add an extra html element. At the moment I thought about adding something like adding the after pseudo to the content element and at a clear:both, but didn't work. – andresmijares Nov 24 '13 at 20:05
  • Yeah, content not receiving enough info about its parameters, so is defaulting to showing a 0px height, but letting internal content flow onto the rest of the page. http://jsfiddle.net/andresmijares/8sQdy/ – Thomas Cheney Nov 24 '13 at 20:05
1

I use a empty clear div at the end of the content container

added CSS:

.clear {
    clear: both;
}

HTML:

<div class="content">
    <div class="left">
        <p>some content</p>
    </div>
    <div class="right">
        <p>some content</p>
    </div>
    <div class="clear"></div>
</div>
Alexander Schranz
  • 2,154
  • 2
  • 25
  • 42
  • yes that would be the 1st thinking solution, however I am not able to add an extra html element... maybe something with the right:after would work – andresmijares Nov 24 '13 at 21:02
1

Because floated elements are taken away from the normal flow they take up no space in the parent container. So if a container has only floated elements, its height will be 0px as all floated elements are taken away from the container. For this reason, the background color of the container is disappeared. You may add display: flow-root in your content container to solve the problem.

abu sayed
  • 11
  • 3
0

you can try this solution

.content:before, .content:after {
    content: " ";
    display: table;
    clear: both;
 }

or add display:table to content div:

.content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
    display: table; 
}
Loothmane
  • 1
  • 1
-2

how about setting your margin and padding to 0 on ALL divs?

Sorunome
  • 478
  • 4
  • 8
-2

Try to close all brackets for class names in html layout and add css property float:left to css style of .content class http://jsfiddle.net/u3W79/

Andriy Ivaneyko
  • 20,639
  • 6
  • 60
  • 82