title: IE8 - Container with margin-top: 10px has no margin
body: <p>EDIT: This happens only in IE8, it works fine in IE7, Firefox, Opera etc</p>
  
  <p>First of all, here is a picture I have made in photoshop to demonstrate my problem: <a href="http://richardknop.com/pict.jpg" rel="noreferrer">http://richardknop.com/pict.jpg</a> </p>
  
  <p>Now you should have idea about my issue. Here is a simplified version of markup I'm using (I left out most irrelevant content):</p>
  
  <pre><code>&lt;div class="left"&gt;
      &lt;div class="box"&gt;
          // box content
      &lt;/div&gt;
      &lt;div class="box"&gt;
          // box content
      &lt;/div&gt;
      &lt;div class="box"&gt;
          // box content
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="right"&gt;
      &lt;div class="box"&gt;
          // box content
      &lt;/div&gt;
      &lt;div class="box"&gt;
          // box content
      &lt;/div&gt;
      &lt;div class="box"&gt;
          // box content
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;div class="box"&gt;
      //
      // NOW THIS BOX HAS NO TOP MARGIN
      //
  &lt;/div&gt;
  &lt;div class="box"&gt;
      // box content
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS styles go like this:</p>
  
  <pre><code>.clear {
      clear: both;
  }
  .left {
      float: left;
  }
  .right {
      float: right;
  }
  .box {
      overflow: auto;
      margin-top: 10px;
  }
  </code></pre>
  
  <p>Obviously I have left out all irreevant styles like borders, background colors and images, font sizes etc. I have kept only important stuff.</p>
  
  <p>Any idea where could be the problem?</p>