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
Brad Lacke
7,438 PointsPrecision Percentages?
I completely get why we're using percentages for layout, and I understand the need for all divs and margins to total 100% of browser width, but why so precise? Like, why couldn't
.main {
width: 65.957446808511%;
}
.secondary {
width: 31.914893617021%;
margin-left: 2.127659574468%;
}
be:
.main {
width: 67%;
}
.secondary {
width: 31%;
margin-left: 2%;
}
Is it because we're shooting for some specific pixel widths at a certain viewport size? It just seems needlessly precise.
2 Answers
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsApologies, didn't actually do the maths, assumed you were rounding them which is a common mistake people make.
You are right, as long as the total of the columns = 100% then its fine. It's just that in a lot of cases, the width's won't work out to nice round numbers.
An example using a 12 column grid (not accounting for gutters to keep it simple):
Starting with a page width of 960px:
960px / 12 = 80px (1 column)
.main would = 640px (8 columns)
.secondary = 320px (4 columns)
Starting with a page with of 1000px:
1000px / 12 = 83.333333333333333333333333333333px (1 column)
.main = 666.66666666666666666666666666667px (8 columns)
.secondary = 333.33333333333333333333333333333px (4 columns)
Starting with a page width of 100%:
100% / 12 = 8.3333333333333333333333333333333% (1 column)
.main = 66.666666666666666666666666666667% (8 columns)
.secondary = 33.333333333333333333333333333333% (4 columns)
Your example and Guil's example both work out to 100%. .main is approximately 2/3 and .secondary approx 1/3 of the page so both are fine.
Not sure if it really answers your question but the important thing is that the sum of the column widths = 1 whole or 100% of the page.
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsHuman's might not be able to notice the difference between a width of 31.914893617021% and 32% but a browser definitely can. Also, If you're rounding percentages several times throughout your code the tiny differences will add up to a big difference. Not setting it exactly will only lead to problems down the line.
Hope this helps :)
Brad Lacke
7,438 PointsI guess my question here would be: why is 31.914etcetc more exact than 32%. In the example above, I'm not rounding, I've simply chosen an alternative configuration for arriving at 100%. What purpose under the hood am I not getting for the fractions?
Brad Lacke
7,438 PointsBrad Lacke
7,438 PointsOK, I see, so I'm assuming Guil is trying to hit x% of a useful pixel width or something along those lines...I suspected that was the case, but your example with the 12-column grid really hit it home. Thanks for the clarification!