user3847141 user3847141 - 4 years ago 102
CSS Question

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

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

Full page

Correct div floating when page width is more than 444px

correct >444

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

wrong

Correct div floating when page width is less than 444px

correct <444

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

Jay Jay
Answer Source

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%);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download