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


Pixels 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?

James Barnett
James Barnett
39,199 Points

Since 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

11 Answers

James Barnett
James Barnett
39,199 Points

At 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.


My original answer was 1.56% and it was rejected

well you left off some decimal places.

1.562%? Seriously....

Jackie Keiser
Jackie Keiser
9,833 Points

When 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
James Barnett
39,199 Points

In terms of typing out the actual numbers, I like to round to 3 decimal places because of how the math works out.

Ian Watkins
Ian Watkins
1,036 Points

To 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?

Don'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.

I 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?

I 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.

I had the same problem. I solved it by dividing it by 700 instead of 640.

For 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.

Here is an example of what i use when i build websites

.inner-container{ padding: 0 6.140350877193%; width: 87.719298245614%; float: left; }

I 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
James Barnett
39,199 Points

Zack 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.