You need to clear the float, which returns document flow back to normal. Use clear:left
(or right, or both if such floats need to be cleared) on the last element that should reset the flow. Also read up on ClearFix. It should be noted that ClearFix can get a little sticky with IE... if you have control over the markup, sometimes it is safer to use the traditional clear.
views:
801answers:
6Renders fine in my IE7 on Vista. What version of IE & what platform are you using?
Yes. You should clear your float when div's closing.
<div>
<div style="float:left">Floated Div</div>
<div style="clear:both;" />
</div>
overflow: auto
on the containing element.
See: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats
I would highly recommend NOT to use hacks like ClearFix. If you're trying to save a <div class="clear"></div> because it's not "semantic" you're going to set yourself up trouble down the line. Best, if you know your layout won't change, or you can tell for sure what the next element is, you can use the next element to clear previous "floats". If you need something modular, like a piece of HTML that can be inserted in various places, then always add the clearing DIV.
Also regarding David's comment:
<div style="clear:both;" />
Be careful as that is not valid HTML or XHTML. Although it seems valid from a XML point of view, it does not respect the document definition (whatever it's called, which is referred to by the DOCTYPE tag). In other words, the DIV is defined as an element that opens, and closes with a separate closing tag. Contrary to a <BR/> for example, which allows for "self-closing". Granted, Firebug and possibly other web developer tools, will sometimes show DIVs that way but that's just how they display it.
PPS: at my job I've found that this worked well in some layouts to fix inconsistent vertical spacing between elements when clearing DIVs in IE6 and other browsers:
Cross browser clearing:
div.clear { clear:both; overflow:hidden; height:0; }
<div class="clear"></div>
Don't use an inline style for this, ever. First you will need it often, and second, as yo ucan see above, it may come in handy to change the clear rule to fix some cross browser troubles.