Why use long decimal point values in CSS percentage widths?

You could argue that 4 decimal places is sensible for current tech.

Using width: 33.33% for 3 cols will be fine — even a 4k screen won’t show a gap (99.99% of 4096px = 4,095.5px, which rounds up to 4096px so no gap)

But other ratios might.

1 pixel on a 4k screen is 1/4096 = width: 0.00024%, so 4 d.p. would guarantee no gaps. You’d be safe for 8k screens too… in fact it’d take a 20,000px-wide screen to have any chance of a gap if your sizes are accurate to 4 d.p.

…… browser support allowing, of course! Some have already noted that some browsers truncate to 2 d.p., spoil-sports.


Altough browsers may round differently there really is no need to have 14 decimal places because in the end the value, converted into pixels, will probably be the same, no matter if 14 or 3 decimal places were used.

The cause of the 14 decimal places is most likely because the devs are using a css-preprocessor (like less) where the width of the div is calculated like
width: 100% / @columns;

Their preprocessor probably just uses the full float, which it calculated, as the actual css value, including all it's decimal places, in oppose to truncating them.


It is required in some cases. I'm working on a site using the Twitter Bootstrap which has 6 divs stretching the full width of the site. If I just make the width of each one 16.66% a noticeable gap is left at the end, if I make the width 16.67% one of the divs is pushed onto the line below. This meant to get the divs to fill the full space, I had to set the width to 16.6667% which works perfectly in Chrome and Firefox but it seems that Safari and IE round the decimal point down to 2 places so I'm left with a gap when using them. So sometimes it might seem excessive but other times it is actually needed.

Dave