Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

Mike Staebell
Mike Staebell
6,177 Points

Percentage values

What's the significance of the percentages Guil is using? (For example, he's using something like width:65.123456789%.) Why not just round up or down? I don't understand the need to use 8+ decimal points. I'm probably missing something.

4 Answers

James Barnett
James Barnett
39,199 Points

Rounding errors mainly due to the way the math works out. In my own work, I round up to 3 decimal places.

further reading: http://nimbupani.com/using-decimal-percentage-values-in-responsive-design.html

Evandro Camargo
Evandro Camargo
14,187 Points

It's probably just to the fact that, the more precise you get, the less gaps and "white spaces" you would find. As you can never go 102% of total width without having a horizontal scroll bar or just that 99.89% isn't the same as 100% when it comes to precision. On smaller screens that point-something % could be insignificant but at some point it might render something worth 10 or even 20 pixels of unused or unspecified space with some high-density or wide resolution viewports.

As long as that doesn't matter to you, it should be ok to round up or down. :) Again, as I said back in another post, this is just my 2 cents and opinion. I might have been misled at something believing such would be the case (as I've asked myself the same question when I first saw that, but then came to that conclusion.).

Mike Staebell
Mike Staebell
6,177 Points

Thanks, Evandro. I follow your logic. Those extra pixels definitely matter to me. But I can't help but wonder what originally caused the need for that many decimal points? If you use whole numbers for all of your padding/margins, wouldn't that allow you to stick with whole numbers?

For example, if you set a margin of 5% and a padding of 10%, the width of the viewport would be 70% (since 5x2 + 10x2 = 30% worth of padding/margins)

Is it because he used pixels in some cases? I'm no math whiz, but I could see how that might break the percentage values into numerous decimal points.

Evandro Camargo
Evandro Camargo
14,187 Points

Well, there we go. That was, in fact, the reason. But as we learn there, there might be no real point to use precision above 3 decimals or maybe we could consider using the calc() CSS function and provide the 3 decimals fallback option for older browsers.

I think that Guil just tried to illustrate that decimal precision on percentages DO matter. From there we learn it and adapt it to real world needs. :)