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.

By continuing to use this site, you agree to the use of cookies. See the Privacy Policy for more details.