title: make html floating elements take up space inside div
body: <p>I have a floating <code>&lt;div&gt;</code> inside another <code>&lt;div&gt;</code>, the containing div has a black border...</p>
  
  <p>problem is that the floating <code>&lt;div&gt;</code> doesn't actually take up the height that it is (about 600px) or so and so the containing <code>&lt;div&gt;</code> with the border ends up like 20 px tall with the border going straight through the inner div.</p>
  
  <p>How do I make the inner div take up the space it's supposed to, while still having it float?</p>
  
  <p>Here is my source:</p>
  
  <pre><code>&lt;div style="border:1px solid black"&gt;
      &lt;div style="float:left;height:200px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>