2

I am building a 3 column layout with floated divs. I have a container with a 20px padding. Within the container I have 1 full-width block, followed by 3 columns, following by another full width block. Columns are floated to the left. width:31%, margin:0 1%. This adds up to 99%; The full width blocks have margins of 0 2% 0 1%. Which also adds up to 99%.

Mozilla and IE render everything perfectly, but Chrome adds another 1% to the full width blocks. I can't understand the calculation.

Could you maybe take a look: schoolscout.co.uk.

Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80
hypeJunction
  • 351
  • 1
  • 9
  • 3
    Is this answering the same question? http://stackoverflow.com/questions/5115637/evenly-distributed-height-of-child-elements-with-css – ajcw Mar 25 '11 at 22:14

1 Answers1

8

Because different rendering engines calculate percentages to pixels differently. John Resig provides a good overview in his article Sub-Pixel Problems in CSS.

The picture included there shows a nice example of what can go wrong:

Both Opera and Safari [and other WebKit-based browsers, MK] round down the widths of all the divs to 12px. This leaves a 2px gap (note the green) to the right of all the divs. If you’ve ever wondered why your nicely-aligned navigation doesn’t fill up the full contents of a container in these browsers, now you know why. On the plus side, at least you know what the width of these containers will all be the same, no matter what.

Looking at your page, this is what I get:

                 m     b     p     w     p     b     m   total
Chrome
column_header    6     1     -   674     -     1    13     695
column           6     -     -   215     -     -     6     227
Firefox
column_header    6     1     -   673     -     1    13     694
column           6     -     -   216     -     -     6     228
Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80
  • thanks. That's what I thought was happening. Is there a nice fix? I want to keep the layout fluid... Do you think it would make sense defining a different margin for webkit? – hypeJunction Mar 26 '11 at 11:43
  • @user: You can always test using JavaScript if the sum of the totals is the same as the wide column (excluding some margins) and correct those widths accordingly (you can do this `onload` and `onresize`). – Marcel Korpel Mar 27 '11 at 10:05