title: Div containing other divs does not have proper height
body: <p>I have a 'frame' containing two divs which are respectively aligned on the left and on the right. Unfortunately, the main <code>div</code> does not have the proper height to englobe the inner divs.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div id="frm"&gt;
     &lt;div id="a"&gt;aaa&lt;br&gt;aaa&lt;/div&gt;
     &lt;div id="b"&gt;bbb&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>#frm {
      background: red;
      width: 100%;
      height: auto;
  }
  
  #a {
      background: blue;
      float: left;    
  }
  
  #b {
      background: green;
      float: right;
  }
  </code></pre>
  
  <p>Here is the JsFiddle: <a href="http://jsfiddle.net/mPH4H/" rel="nofollow">http://jsfiddle.net/mPH4H/</a></p>
  
  <p>I should see a red frame, but there is none.</p>