Menu
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:
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?
345
To fix this problem, the footer can be cleared to ensure it stays beneath both floated columns. Clear has four valid values as well. Both is most commonly used, which clears floats coming from either direction. Left and Right can be used to only clear the float from one direction respectively.
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both . Usually you'll want to use both.
Is CSS float deprecated? In a word: no. The float property still exists in CSS as it did when Internet Explorer was a young browser, and still works the same.
Floating everything can make for a great deal of inconsistency; depending on how wide a screen is and how tall certain elements are rendered, you can end up with a hodgepodge of screen jag. For example, widening the screen would cause more elements to fit on the top line, so they would jump up.
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
123
Why don't you use
display: inline-block; instead of float: left for .box?
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
