+3  A: 

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.

Rex M
Can't believe it was that simple. For some reason I was thinking that didn't work, but it does. Thanks!
Joshua Carmody
+1  A: 

You need to clear the float Clear Fix

Some more information

NTulip
+1 for the "Some more information" link especially.
Joshua Carmody
glad i could help
NTulip
A: 

Renders fine in my IE7 on Vista. What version of IE & what platform are you using?

fig
This particular example works fine for me in IE. However, on another site I have where I'm doing something similar, it doesn't work in IE. I'm not sure why this exact code does. Quirks-mode rendering?
Joshua Carmody
+5  A: 

Yes. You should clear your float when div's closing.

<div>
  <div style="float:left">Floated Div</div>
  <div style="clear:both;" />
</div>
David
+2  A: 

overflow: auto

on the containing element.

See: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats

Lee Henson
I can't believe that works, but it does. Wow. New accepted answer.
Joshua Carmody
Doesn't work on IE6 though. Ah well.
Joshua Carmody
A: 

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.

faB
Agreed, the inline styles were just there for simplicity in the example. I also prefer to avoid browser-specific hacks in my CSS. What I ended up doing was a lot like you showed. Still, I appreciate links to thinks like ClearFix, just so I'm aware of them and can see how they work.
Joshua Carmody