title: Strange floating box issues
body: <p>If I used the following code:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;&lt;td&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;p&gt;varying lines of text&lt;/p&gt;
      &lt;/td&gt;&lt;td&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;p&gt;varying lines of text&lt;/p&gt;
      &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;p&gt;varying lines of text&lt;/p&gt;
      &lt;/td&gt;&lt;td&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;p&gt;varying lines of text&lt;/p&gt;
      &lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I would have no problems using CSS on it, but as the future progresses, I'll have a gut feeling future browsers will depreciate more table functionality. I'm trying to achieve the same thing but with DIV tags and CSS and I want to make it compatible with older web browsers such as Internet Explorer 7.</p>
  
  <p>This is the code I have:</p>
  
  <p>CSS:</p>
  
  <pre><code>.stretch{width:100%;overflow:hidden}
  .common{float:left;margin:0.2em;padding:0.1em;width:40%}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ID="outer" class="stretch"&gt;
      &lt;div class="common"&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;p&gt;varying lines of text&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="common"&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;p&gt;varying lines of text&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="common"&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;p&gt;varying lines of text&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="common"&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
          &lt;p&gt;varying lines of text&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tested it in firefox 15 and opera 11.6 on my natural desktop size of 800x600 and the boxes line up correctly. When I use the zoom tools in both browsers to zoom out to emulate a 1024x768 screen, the last two boxes do not align side-by-side. it's more like a 3 row by two column grid with some pieces missing. However, I went down to a 50% zoom (to emulate a 1600x1200 screen) and the box arrangement is correct.</p>
  
  <p>Each box contains a variable amount of text.</p>
  
  <p>Why does this happen and is there a way to fix this or do I have to return to using tables?</p>