title: divs collapsing around header
body: <p>I have a few nested divs:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="header"&gt;
      &lt;!-- a bunch of float divs here --&gt;
    &lt;/div&gt;
  
    &lt;div id="body"&gt;
      &lt;div id="content"&gt;
        &lt;!-- a bunch of html controls here --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ul>
  <li>wrapper style: <code>width: 780px; margin:
  20px auto; border: solid black 5px;</code></li>
  <li>header style: <code>position: relative;
  min-height: 125px;</code></li>
  <li>body style: <code>position: relative;</code></li>
  <li>content style: <code>position: absolute;
  left: 50px; top: 0px;</code></li>
  </ul>
  
  <p>I have a bunch of html elements in the content div and for some reason the body div and the wrapper div are collapsing around the header and the content div hangs out on its own if I don't set a fixed height for the body div. The only float elements I have are in the header.</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>If I remove the content div (and drop the html elements directly in body) the body div stops collapsing! Trying to understand why - guess it's due to the position: absolute of the content div.</p>
  
  <p>Any clue why this is happening and how to solve?</p>
  
  <p>I had a look at <a href="https://stackoverflow.com/questions/370432/div-collapse-after-float-css">this question</a> but It doesn't seem to work for me (or maybe I am clearing inthe wrong place...).</p>