title: Why is the parent div height zero when it has floated children
body: <p>I have the following in my CSS. All margins/paddings/borders are globally reset to 0.</p>
  
  <pre class="lang-css prettyprint-override"><code>#wrapper{width: 75%; min-width: 800px;}
  .content{text-align: justify; float: right; width: 90%;}
  .lbar{text-align: justify; float: left; width: 10%;}
  </code></pre>
  
  <p>Now when I write my HTML as </p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div class="content"&gt;
          some text here
      &lt;/div&gt;
      &lt;div class="lbar"&gt;
          some text here
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the page renders correctly. However, when I inspect the elements, <code>div#wrapper</code> is shown as being <code>0px</code> high. I would've expected it to expand till the end of <code>div.content</code> and <code>div.lbar</code>... Why does this happen? </p>
  
  <p>Again, the page renders fine. This behaviour just perplexes me.</p>