How can I use "float: left" in a div without breaking the containing element's height?

It seems that floated HTML elements don't expand the heights of their containers. For example, consider the following code:

<div class="portfoliosite" style="background: #777777; padding: 10px; width: 550px;">
    <div class="portfoliothumbnail" style="background: red; margin: 0 10px 10px 0; float: left; height: 150px; width: 150px;"><!-- Img tag goes here --></div>        
    <p class="portfoliotitle">AwesomeSite.Com</p>
    <p class="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p>        
</div>

It renders like this on Firefox, Opera, Chrome, and (in some circumstances I haven't figured out yet) on IE:

Notice how the containing div with the gray background is shorter than the red div, and the red div extends outside the container's boundaries. I'd like the containing element to expand to the size of its contents, including the floated element. Is there an elegant solution for accomplishing this, preferably one that doesn't involve setting a fixed height or using Javascript?

From stackoverflow

• 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.

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

• You need to clear the float Clear Fix

  Some more information

  Joshua Carmody : +1 for the "Some more information" link especially.

  NTulip : glad i could help

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

  Joshua Carmody : 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?

• 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

  Joshua Carmody : I can't believe that works, but it does. Wow. New accepted answer.

  Joshua Carmody : Doesn't work on IE6 though. Ah well.

• 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.

  Joshua Carmody : 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.