4

I'm experiencing what appears to be a bug in WebKit's rendering of floating elements' width when they have margins.

The following renders as one would expect in Firefox (3.6) and WebKit (Chromium 5.0):

<div style="width: 100%; background-color: green;">
    <div style="background-color: red; float: left; width: 50%;">n</div>
    <div style="background-color: red; float: left; width: 50%;">n</div>
    <div style="clear: both;"></div>
</div>

That is to say, as a completely red box, with no green background showing.

Now try this:

<div style="width: 100%; background-color: green;">
    <div style="background-color: red; float: left; width: 40%; margin-left: 10%;">n</div>
    <div style="background-color: red; float: left; width: 50%;">n</div>
    <div style="clear: both;"></div>
</div>

What is expected is the same as as before, except for 10% of the box on the left-hand side to be left green. This is what is seen on Firefox.

However, on WebKit browsers, one pixel of green is left on the right-hand side of the box: the floating elements no longer completely fill it up.

The problem appears to compound when more floats and margins are used, leaving a larger amount not filed up.

Is this a bug? A rounding error? It's certainly not what I expected. And more importantly, what can I do to get around it?

EDIT: After much searching I found that it is a reported bug; probably a rounding error as suspected: https://bugs.webkit.org/show_bug.cgi?id=5531

My most important question still stands: is there any way around the bug?

mskfisher
  • 3,291
  • 4
  • 35
  • 48
jameshfisher
  • 34,029
  • 31
  • 121
  • 167
  • I've only been able to bruteforce (with jquery/javascript) my way around the problem. And it's more insidious that you describe, try a div that's 100px wide with three floating divs that are 33%, 33%, and 34% respectively. Then make the div different sizes and watch the rounding fun. – Nilloc Jan 15 '11 at 15:44

2 Answers2

0

I suspect there is no magic workaround for this. Browsers interpret sizes in a mathematically different way. There is another question slightly related to this here, which is the particular problem I encountered. There is wider infomation here. I once read a great article explaining the problem very exactly, but I lost the bookmark. I'll try and find it again so I can post it here.

Essentially, different browsers round decimal pixel values differently. So, the short answer is you will never get an exact cross-browser solution as long as this differences exist. The particular problem I had was the one described in my first link: even without using percentage values (fixed pixel sizes), I encountered 2 "sides" between browsers, in which the vertical alignment of some elements would be different: Firefox and Internet Explorer, on the one side, and Opera, Chrome and Safari on the other.

Yet, this depended on the exact values of line-height and font-size I used, so sometimes I would get differences even between Firefox and IE, or other combination. Without using conditional CSS, I could only reduce the problem to those 2 groups, and then used conditional CSS to adjust the margins in Opera and Chrome.

So, to sum it up, as far as I know, I'm afraid you'll have to use conditional CSS. Cheers!

Community
  • 1
  • 1
Rorok_89
  • 365
  • 1
  • 9
0

Perhaps something like this instead?

<div style="width: 100%;">
    <div style="background-color: green; float: left; width: 10%;"></div>
    <div style="background-color: red; float: left; width: 40%;">n</div>
    <div style="background-color: red; float: left; width: 50%;">n</div>
    <div style="clear: both;"></div>
</div>
haejeong87
  • 847
  • 1
  • 10
  • 20