Question

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.

Answer 1

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