Chrome and Edge floating middle image below first and last, is this correct?

Question

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.

I made a JSFiddle to be tested http://jsfiddle.net/e47jckrh/

HTML

<div id="d1">
    <p>1</p>
</div>
<div id="d2">
    <p>2</p>
</div>
<div id="d3">
    <p>3</p>    
</div>

CSS

div{
  float: left;
}

Down below there is a visual representation of how it should behave

Full page Layout

Correct div floating when page width is more than 444px

Wrong div floating order when page width is between 444 and 436px

Correct div floating when page width is less than 444px

It may be just me thinking there is something wrong, but i assume the firefox behavior to be the correct one.

Answer 1

I've edited your fiddle here: http://jsfiddle.net/e47jckrh/5/

You didn't float all your elements as you'd suggested in the question. So I added float: left; to the div numbered 3 and set all 3 to display: inline-block;. And using display: table; and display: table-cell; with vertical-align: center; is a really old way to get something to align vertically.

These 3 lines work for most things:

position: relative;
top: 50%;
transform: translateY(-50%);

Answer 2

Okay. So #d3 shouldn't be on the right side at all because it isn't floated, but you used display:table. This gives it the effect of being floated with the other two divs for some reason.

Since it uses display: table #d3's margins are off the page but don't count as "not fitting" and don't force it to the next line.

#d2 is floated though so its margins DO affect it. So in the small range you're experiencing this #d1 + #d2 won't fit because of their margins contributing to an overall larger size width but #d1 + #d3 will because #d3 is not being affected by its margin on the right side giving the combo an overall smaller size width.

Simple solution is to float #d3 as well:

#d3 {
    background-color: #ede4ad;
    border: 3px dotted #6e5b3c;
    clear: right;
    float: left;
}