Why is the outer div border not dependent on the element's rendered content?

Question

I have a problem I can't figure out. When I nest a div inside another div and I want to give the outer div a border, the border doesn't wrap around the rendered content. Even though the content of the inside divs might be several lines high the outside border only adds whatever padding there might be.

The CSS:

.wrapper {
 width:550px;
 border: 1px solid #ccc;
 clear:both;
 padding: 5px;  
}
.content {
 float:left;
 width:250px;
 background-color:#e1e1e1;
}

The HTML:

<div class="wrapper">
<div class="content">
    text<br>
    text<br>
    text<br>
</div>
<div class="content">
 pic
</div>

Answer 1

When an element contains another that is floated, the first element will not seem to contain the second. The accepted solution will work, however I don't like it because it requires extra markup to resolve a layout issue.

A more preferred solution - in my eyes, anyway - is to set the parent overflow to auto:

.wrapper {
    overflow: auto;
}

That will cause the parent element to "contain" the child elements.

Answer 2

It's because of the floats. You need to clear them before the closing </div> tag. Try this:

<div class="wrapper">
    <div class="content">
        text<br>
        text<br>
        text<br>
    </div>
    <div class="content">
         pic
    </div>
    <br style="clear: both;">
</div>

Answer 3

To clear the floats without any additional markup use overflow:hidden

.wrapper {overflow:hidden;zoom:1;}

The zoom:1 will invoke hasLayout in ie6 so the float will clear in ie6.

Answer 4

There is a pretty extensive article about clearing floats here: http://www.positioniseverything.net/easyclearing.html

It also suggest not to use any additional markup. Instead a uses a simple css-class, which you add everytime you want to clear floats.