title: CSS Floating Bug in Google Chrome
body: <p>I'm experiencing a weird issue in the latest version of Chrome (25.0.1364.97 m). I have a set of divs inside a floated, cleared container, all floated left with the same width.</p>
  
  <p>In Firefox, IE, and older versions of Chrome all the boxes sit side by side as they are supposed to but in the latest version of Chrome the first div is above the others like so:</p>
  
  <p><img src="https://i.stack.imgur.com/0uRRD.png" alt="enter image description here"></p>
  
  <p>It only seems to happen when the window is maximised and on the first load, if I refresh the page it sorts itself out, but if i do a hard refresh with Ctrl + F5 it happens again</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="top"&gt;
      &lt;h1&gt;Words&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="wrapper"&gt;
      &lt;div class="box"&gt;Words&lt;/div&gt;
      &lt;div class="box"&gt;Words&lt;/div&gt;
      &lt;div class="box"&gt;Words&lt;/div&gt;
      &lt;div class="box"&gt;Words&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper {clear:both;float:left;margin-top:20px;width:500px}
  .box {float:left;width:100px;border:1px solid #000;margin-right:20px}
  </code></pre>
  
  <p>I've made a fiddle here: <a href="http://jsfiddle.net/GZHWR/3/" rel="nofollow noreferrer">http://jsfiddle.net/GZHWR/3/</a></p>
  
  <p>Is this a bug in the latest Chrome?</p>
  
  <p>EDIT: I know this can be solved by applying padding to the #wrapper element instead of margin-top but we manage around 140 sites so it's not practical to go and change the CSS on every one</p>
  
  <p>EDIT 2: I think I need to clarify my question. <strong>I am not asking how to fix the issue</strong>. I already know that. I want to know why this behaviour is occuring? Why is the rendering engine rendering the markup/css like this? Is it correct behaviour?</p>