title: position absolute div broken
body: <p>I have a div like this:</p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;div class="container_1"&gt;A&lt;/div&gt;
      &lt;div class="container_2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat diam non neque imperdiet cursus ut ut erat. Sed pellentesque congue justo, sed auctor velit posuere ac.&gt;&lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>And my css is like this:</p>
  
  <pre><code>.main div
  {
      float:left;
  }
  
  .main .container_2
  {
      width:500px;
  }
  
  .main .container_1
  {
      width:40px;
  }
  
  .main
  {
      position:absolute;      
      padding:5px;
      color:#fff;
      background-color:#365;
  }
  </code></pre>
  
  <p>The problem I have is, when I don't use <code>position:absolute;</code> on my <code>main</code> div, everything is broken (you can view the example on <a href="http://jsfiddle.net/4SNnM/5/" rel="nofollow"><strong>jsfiddle</strong></a>. Everything works fine only if I use position absolute on the main div, but I don't wanna use position absolute because I want the main div to preseve its space in the document. Any help please?</p>
  
  <p>Thank you</p>