Chrome and Edge have a floating average image below the first and last, is this correct?

Question

It looks like on Microsoft edge and google chrome, the float doesn't sort the divs properly, if you have three divs located on the left and the page is scaled between 444 and 436 px wide, the third div goes into the second div instead of going below this . This "error" does not occur in firefox.

I made a JSFiddle to test 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; } 

At the bottom below there is a visual representation of how he should behave

Page Layout

Valid div when page width is greater than 444px

Invalid div floating order when page width is between 444 and 436 pixels

Valid div when page width is less than 444px

Maybe I just think that something is wrong, but I believe that the behavior of firefox is correct.

Answer 1

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

You did not swim all of your elements, as you suggested in the question. So I added float: left; in div with number 3 and set all 3 to display: inline-block; . And using display: table; and display: table-cell; with vertical-align: center; - This 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

The behavior is caused by margin-right.

When div 2 reaches the limits of its container, it overflows. In this case, you control your margin limit on the right. BUT margin-right is only valid if there is the next element (its calculated base on the next element). In this case, div 3.

After the newline overflows, div 3 takes its place. But in this case, margin-right does not work from the moment of the last element in this thread.

EDIT: I just realized that you were not floating all over the element, I don’t know if this was your original idea. If I did not delete this answer.

Answer 3

Good. Therefore, #d3 should not be on the right, because it does not swim, but you used display:table . This gives a reason to swim with the other two divs for some reason.

Since it uses display: table #d3 , the fields are not displayed on the page, but are not considered "not suitable" and do not lead it to the next line.

#d2 floats, so its DO fields affect it. Thus, in the small range that you are experiencing, this #d1 + #d2 will not match due to the fact that their fields increase the overall width of the larger size, but #d1 + #d3 will be because #d3 does not depend on it the edge on the right side gives the combo an overall smaller width.

A simple solution is also float #d3 :

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