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!
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
Howard Kirk
2,657 PointsPixels to Percent
From what I understand, converting a margin from pixels to percents is based on the usual formula, with the context being the width of the container. So the question was using .cake as your context, convert the margin on .filling to percent. The pixels on .cake was 640, the pixels on the margin for .filling was 10px. I divided 10 by 640 and came up with 0.015625 - I shifted the dec and came up with a margin of 1.56% - The tutorial questionnaire is telling me that is not correct. What am I missing?
11 Answers
James Barnett
39,199 PointsAt the top of the code challenge it gives you some very important instructions
When setting flexible margin on an element, your context is the width of the element's container.
Zack Perdue
1,824 Points10/640*100
Howard Kirk
2,657 PointsMy original answer was 1.56% and it was rejected
Zack Perdue
1,824 Pointswell you left off some decimal places.
Howard Kirk
2,657 Points1.562%? Seriously....
Jackie Keiser
9,833 PointsWhen you're converting pixels to percents, you don't have to cut it off at two decimal places. If you want it to be exact, use the full number even if it's kind of ridiculous. We're talking about a computer doing these calculations, not a person. Computers are good at this kind of thing.
James Barnett
39,199 PointsIn terms of typing out the actual numbers, I like to round to 3 decimal places because of how the math works out.
Ian Watkins
1,036 PointsTo go along with this one I am working on the first code challenge in scalable image where you need to convert the padding to a percentage in cake I put 1.428571429% but it says that wrong.
Any one have any ideas?
Toby Bowley
4,145 PointsDon't forget when dealing with percentages you are dealing with the parent, so try dividing it by the margin in the same div, I think that will help.
Daniel Phelps
3,285 PointsI was also stuck until I tried putting 1.6666666% as my answer and it let me through. I guess since padding is space inside a .cake element, the padding's context is the cake element? It doesn't make complete sense to me, would anybody mind clarifying why it's my 100*10/600 and not 100*10/700?
Zack Perdue
1,824 PointsI guess a better answer would have been along the lines of explaining the reasons WHY we use these large calculations instead of how to get them. As long as we get them and that they are correct is all that matters.
width: result = target ÷ context * 100
I don't like to round my result because I think IE does better with the entire decimal.
Kevin Silvestre
13,561 PointsI had the same problem. I solved it by dividing it by 700 instead of 640.
Joseph Damiani
1,066 PointsFor example, if you are using 20px as your font size then the percentage would be 125%. 20 / 16 = 1.25. You would always calculate any pixels size with 16. You would move your decimal point to the right 2 times no matter what to get your answer.
Zack Perdue
1,824 PointsHere is an example of what i use when i build websites
.inner-container{ padding: 0 6.140350877193%; width: 87.719298245614%; float: left; }
Zack Perdue
1,824 PointsI either use a css pre-processor to calculate my %'s.
It goes one of two ways, I use an expression and have it calculated on the fly.
OR I calculate it myself using this plugin I made that calculates expressions that you highlight within your editor (coda) http://zackperdue.com/plugins/coda-math-plugin-computate
Here is also another resource to learn about fluid grids http://www.alistapart.com/articles/fluidgrids/
James Barnett
39,199 PointsZack Perdue - Like when you learned long division as a kid first you learn to do it by hand and when you did more advanced math you learned to use a calculator to speed up the time it took to do the calculations.
The original poster is currently at the stage of learning how to do these calculations by hand talking about using a CSS pre-processor to speed up muddies the waters a bit.
James Barnett
39,199 PointsJames Barnett
39,199 PointsSince you didn't give us a link, the step you were on or the question text I'm guessing here.
Question: Using .cake as your context, convert the margins on .filling from pixels to percentages.
Link: http://teamtreehouse.com/library/build-a-responsive-website/creating-a-fluid-foundation/creating-flexible-margins