title: Chrome and Edge floating middle image below first and last, is this correct?
body: <p>It seems that in Microsoft's edge and google chrome the floating doesn't rearrange the divs properly, if you have three divs floated left and the page is scaled in a width between 444 and 436 px the third div goes to the second div's position instead of going below it. This "bug" does not occur in firefox.</p>
  
  <p>I made a JSFiddle to be tested <a href="http://jsfiddle.net/e47jckrh/" rel="nofollow noreferrer">http://jsfiddle.net/e47jckrh/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="d1"&gt;
      &lt;p&gt;1&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="d2"&gt;
      &lt;p&gt;2&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="d3"&gt;
      &lt;p&gt;3&lt;/p&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div{
    float: left;
  }
  </code></pre>
  
  <p>Down below there is a visual representation of how it should behave</p>
  
  <p><strong>Full page Layout</strong></p>
  
  <p><a href="https://i.stack.imgur.com/6Z7px.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Z7px.png" alt="Full page"></a></p>
  
  <p><strong>Correct div floating when page width is more than 444px</strong></p>
  
  <p><a href="https://i.stack.imgur.com/kG1Dw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kG1Dw.png" alt="correct &gt;444"></a></p>
  
  <p><strong>Wrong div floating order when page width is between 444 and 436px</strong></p>
  
  <p><a href="https://i.stack.imgur.com/r0jdo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r0jdo.png" alt="wrong"></a></p>
  
  <p><strong>Correct div floating when page width is less than 444px</strong></p>
  
  <p><a href="https://i.stack.imgur.com/5uX3s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5uX3s.png" alt="correct &lt;444"></a></p>
  
  <p>It may be just me thinking there is something wrong, but i assume the firefox behavior to be the correct one.</p>