Why use long decimal point values in CSS percentage widths?

Question

I've noticed in my own work that 3 fluid columns fill out their parent element much better when their widths are set to 33.333% as opposed to just 33%. I've also noticed when researching various CSS frameworks (i.e. bootstrap.css) that they have 14 decimal places specified on their column widths! That seems like it would be either excessive or clever... but I don't know which.

So what is the value/benefit of having so many decimal places? From what I have gathered, there is an open debate on whether you should avoid decimal places or take advantage of them and I want to know if this should be of interest to me or to just not worry about it.

Capsaicin

I'm guessing it depends on browser implementation. Some browsers probably parse the value as an int, while others parse as a float or double? – Anteater

Browsers vary in how they round percentages. – Degree

Answer 1

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

Traditional

i would use width: calc(100vw / 6); but i also enjoy watching IE users suffer so it works out well in my case – Sigurd

alternatively, calc(100% / 6) – Benita

Answer 2

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.

Changeover

Answer 3

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.

Rickyrico

Answer 4

Because 33 ≠ 33.33333.

If you set a three div's to 33%, there will be 1% left to fill. It's just logical.

Tribulation

I understand that 33 is not the same as 33.333 and so on and I understand that browsers round percentages differently. My curiosity was struck when I saw 14 decimal places being used on twitter.github.com/bootstrap. So far, I can't find any reason why you would need to go that far with it. It just seems excessive to me and being a thorough developer I want to know what is up with that. Basically I need to know if I should take note of its value or totally disregard it. – Capsaicin

Those are programmatically generated by LESS/SASS. – Behring

Answer 5

Writing this as the other answers aren't really using any concrete facts or data.

The people who make Sass have to actually implement this feature are probably a good example to follow.

The default level of precision in node-sass is 5 decimal places, which is clearly a decision they've made, as JS floats can have more than 5 digits.

https://github.com/sass/node-sass#precision

The dart-sass project also mentions:

Dart Sass defaults to a sufficiently high precision for all existing browsers, and making this customizable would make the code substantially less efficient.

5 decimal places seems enough as browser viewports are typically maxed out in the thousands (<10^4) and the subpixel precision is no better than one decimal place (<10^(-1))

10^4 / 10^(-1) = 10^5, so 5 decimal places should be plenty

Benita

Answer 6

Bootstrap 4.3 uses 6 decimal places. This is inline with the float32 standard. (A 32-bit standard)

Mechanism