CSS container/wrapper height does not expand with floated content: CSS fix

The problem: If a parent container/wrapper is NOT floated but the children inside of it ARE floated, then the parent will not expand at it’s children do. Here’s some quick markup showing a common scenario:

     <div id="wrapper">
          <div id="content_one" style="float: left;"></div>
          <div id="content_two" style="float: left;"></div>
          <div id="content_three" style="float: left;"></div>
     </div>

The problem is that, if you float the content within the wrapper, the wrapper does not expand with it’s content:

There’s a simple fix for this. All you have to do it stick a clearing div after all of the content. This will force the wrapper to expand to the size of it’s content. Here’s an example in HTML:

     <div id="wrapper">
          <div id="content_one" style="float: left;"></div>
          <div id="content_two" style="float: left;"></div>
          <div id="content_three" style="float: left;"></div>
          <div style="clear: both"></div>
     </div>

Which will yield a result similar to this:

As long as you have this invisible clearing div, the height of the wrapper is increased along with it’s content. Any boxes you place after the wrapper will come after the full wrapper block as you would expect. Do you know of another fix? Let me know in the comments section below. Thanks for reading!