Fixing Sub-Pixel rounding issue in a CSS Fluid Grid

Question

I\'m trying to create a fluid CSS grid, it works in Firefox and IE8+ but NOT in Safari/Chrome/Opera where the sub-pixel rounding issue becomes visible:

http://jsfidd

Answer 1

Stubbornella's OOCSS framework (links below) grids module deals with this by giving the last column the following overrides:

float:    none;
overflow: hidden;
width:    auto;

This allows it to occupy whatever width remains within the container.

A bit of browser-forking (IE, ptzsch…) is necessary to get the same behaviour: https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css https://github.com/stubbornella/oocss/wiki/grids