CSS Floating Bug in Google Chrome

Andy picture Andy · Mar 1, 2013 · Viewed 27.4k times · Source

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.

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:

enter image description here

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

The HTML:

<div id="top">
    <h1>Words</h1>
</div>
<div id="wrapper">
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
</div>

CSS:

#wrapper {clear:both;float:left;margin-top:20px;width:500px}
.box {float:left;width:100px;border:1px solid #000;margin-right:20px}

I've made a fiddle here: http://jsfiddle.net/GZHWR/3/

Is this a bug in the latest Chrome?

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

EDIT 2: I think I need to clarify my question. I am not asking how to fix the issue. 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?

Answer

Justus Romijn picture Justus Romijn · Mar 8, 2013

It seems to be a bug. The problem appears when applying clear on the wrapper element. When you remove the clear, the bug goes away.

According to the W3C specs regarding the clear property:

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

So it shouldn't effect the children's floating behaviour. I filed a bug report at Chrome about this issue.

Update: From the link in the comments, kjtocool mentioned on 30-03-2013:

It appears that this issue has been corrected in version 26.0.1410.43