Problem
Something I’ve been thinking about when working CSS design for a while.
Are decimal places in CSS widths taken into account? Is it possible that they’re rounded?
.percentage {
width: 49.5%;
}
or
.pixel {
width: 122.5px;
}
Asked by Alastair Pitts
Solution #1
Yes, if it’s a % width, it’s respected. Things fall wrong when you get to fractional pixels, as Martin pointed out, but if your percentage values give integer pixel values (e.g. 50.5 percent of 200px in the example), you’ll obtain predictable results.
Edit: I’ve revised the example to show how fractional pixels are handled (in Chrome the values are truncated, so 50, 50.5 and 50.6 all show the same width).
Answered by Skilldrick
Solution #2
The full value is saved in memory and utilized for subsequent child calculations, even if the number is rounded when the page is drawn. If your box is 100.4999px and paints to 100px, its child with a width of 50% will be calculated as.5*100.4999 instead of.5*100. Then there’s the next level, and the next, and the next, and so on.
I’ve designed highly nested grid layout systems with ems as parents and percents as children, and adding up to four decimal points upstream had a noticeable effect.
Sure, it’s an extreme instance, but it’s something to consider.
Answered by natekoechley
Solution #3
Although fractional pixels may appear to round up on individual elements (as @SkillDrick shows), the fractional pixels are honored in the real box model.
This is most noticeable when elements are stacked next to (or on top of) one another; for example, 400 0.5 pixel divs placed side by side would have the same width as a single 200 pixel div. We’d anticipate the 200px div to be half as long if they all rounded up to 1px (as glancing at individual items would suggest).
This can be observed in the following bit of executable code:
Answered by Sandy Gifford
Solution #4
The width will be rounded to the nearest integer.
However, I’m not sure if every browser will round it the same way. When it comes to rounding sub-pixel percentages, they all seem to have a distinct technique. If you’re interested in the specifics of sub-pixel rounding in various browsers, ElastiCSS has a great post.
edit: Out of curiosity, I tried @Skilldrick’s example in a few different browsers. IE9p7 and FF4b7 appear to round fractional pixel values to the nearest pixel, but Opera 11b, Chrome 9.0.587.0, and Safari 5.0.3 truncate the decimal places when using fractional pixel values (not percentages, as advised in the article I referenced). After all, I didn’t expect them to have much in common…
Answered by MartinodF
Solution #5
They appear to round numbers to the nearest integer, but I’m finding inconsistencies in Chrome, Safari, and Firefox.
If 33.3 percent is converted to 420.945px, for example.
Safari shows it as 420px, whereas chrome and firefox show it as 421px.
Chrome and Firefox appear to follow the floor and ceiling logic, although Safari does not. This page appears to be discussing the same issue.
http://ejohn.org/blog/sub-pixel-problems-in-css/
Answered by agaase
Post is based on https://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected