français
english

CSS thirds (33.3%)

Sometimes one needs to specify widths by percentages for scaling purposes. With items that are full width (100%), half-width (50%), quarter-width (25%), etc. this does not pose a problem. But what if we need to specify one third and the need is pixel-perfect?

On experimenting across browsers from IE8-10, Firefox, Safari, Opera, Chrome/Chromium and iOS and Android native browsers, I have found that specifying 33.333333% (six decimal places) leaves some browsers with a one-pixel space at some widths (and not alway at large widths). Rounding does not seem to be done in the same manner across browsers.

Oddly enough, specifying 33.3334% works perfectly across all browsers.

I have not tries other values that don’t translate well to decimal (1/6, etc.), but I suspect that this sort of minor round up would work equally well for these cases.