title: Make outer div be automatically the same height as its floating content
body: <p>I want the outer <code>div</code>, which is black to wrap its <code>div</code>s floating within it. I dont want to use <code>style='height: 200px</code> in the <code>div</code> with the <code>outerdiv</code> id as I want it to be automatically the height of its content (eg, the floating <code>div</code>s).</p>
  
  <pre><code>&lt;div id='outerdiv' style='border: 1px solid black;background-color: black;'&gt;
  &lt;div style='width=300px;border: red 1px dashed;float: left;'&gt;
      &lt;p&gt;xxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div style='width=300px;border: red 1px dashed;float: right;'&gt;
      &lt;p&gt;zzzzzzzzzzzzzzzzzzzzzzzzzzzzz&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>How to achieve this?</p>