CODEWITHSUNDEEP
cssgoogle-chromecss-float
Andy
Andy

Reputation: 5091

CSS Floating Bug in Google Chrome

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?

Upvotes: 29

Views: 29622

Answers (7)

Justus Romijn
Justus Romijn

Reputation: 16019

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

Upvotes: 13

dsfg
dsfg

Reputation: 130

Remove clear:both;float:left; form #wrapper

clear:both is require when you want div nex raw.

Upvotes: 0

Nomaan
Nomaan

Reputation: 51

Remove clear:both from #wrapper and if you still face a problem apply clear:both after last div

Upvotes: 0

Rahul Shah
Rahul Shah

Reputation: 1407

remove clear:both from #wrapper yes it works..........

http://jsfiddle.net/GZHWR/20/

Upvotes: 0

Hdude74
Hdude74

Reputation: 1

Try this:

css:

   .clearfix {
      *zoom: 1;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      line-height: 0;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }

html:

<div id="wrapper" class="clearfix">
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
</div>

Remove 

clear:both;

from #wrapper

Upvotes: 0

Francois Borgies
Francois Borgies

Reputation: 2408

Try :

#wrapper {
  display:inline;
}
.box{
  vertical-align:top;
}

I had the same issue with the "Like" toolbar and after this code, it work.

Upvotes: 4

Sergio
Sergio

Reputation: 6948

Why don't you use

display: inline-block;

instead of float: left for .box?

Upvotes: 6

Related Questions