: Why is the outer div border not dependent on the element's rendered content? 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

@Voss4911412

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.

Vote Up Vote Down

@Lee4591628

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.

Vote Up Vote Down

@Pope3001725

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>

Vote Up Vote Down