Rounding errors in Webkit, Opera (and IE7 and earlier)

Depending on the exact viewport width, the calculations of % values can include rounding errors. Change the size of your browser window to see the results.

Affected browsers: Safari, Chrome, Opera, IE6, IE7

For more information, see Responsive Design’s Dirty Little Secret.

Standard “float: left” method

1

1

1

1

1

1

1

1

1

1

2

2

2

2

2

Zen Grids 1.2

1

1

1

1

1

1

1

1

1

1

2

2

2

2

2

Source code available at: https://github.com/JohnAlbin/fluid-grid-rounding-errors

Screenshots in various browsers

chrome-21-dev — Screenshot of above page in Chrome 21 dev

safari-5 — Screenshot of above page in Safari 5

opera-11 — Screenshot of above page in Opera 11

ie7 — Screenshot of above page in IE 7

firefox-13 — Screenshot of above page in Firefox 13. Note the sub-pixel rendering prevents rounding errors.