Creating Flexible Margins code - help!

Hi James,

I actually did try that, and also got an incorrect message. It looks like Benjamin's answer above is correct :

Try 640 (cake context) - 10px (for the padding) == 630px (new cake context)

10px / 630px == correct answer.

For .cake, I got 1.25% margin, by dividing 10px / 800px (icing/container context), which it marked as correct.

I'm using the same concept for the .filling margin (10px / 640px (cake context) ==1.56%, but it's marked as wrong.

I too had the same problem figuring this one out. I've done the same formula as shown above 10 / (640-10) and none of my calculations were correct.

10px /630px ==0.01587301587302, I rounded my decimals

So, please explain to me how 1.25% is the correct answer? 1.587 does not round down to 1.25%. Something is not right here. <em>Maybe a solution to this issue would be to provide instructions as to what we're doing wrong</em>, and not just saying <strong>"you're calculations seem to be a bit off"</strong>

I formerly posted in this thread as I was having problems getting the answer correct. I tried copying and pasting the answer, using everyone else's answers....and still nothing. it wasn't until I left the session I was in, came back to it and then submitted my answers and it finally took.

Although, I did take the time to go back and really dig deep and study the layout, the styles (padding, margin, etc.) that I found my mistake. I wasn't accounting for the padding on the element. You have to be very precise and make sure you round your numbers correctly.

Remember, if you have problems, don't just go in the forum and hunt for someone else's answer. You're not going to learn anything that way. If you really want to learn web design, you have to be committed and be willing to possibly work on a simple question for an hour or longer.

Trust me, I am a front-end web designer and developer for a Digital Marketing firm in FL, and have a degree in Web Design and Interactive Media. I am merely taking these courses as a refresher and to build my skill set. I just recently Graduated 7 months ago, and wanted to further knowledge. If you think any of this is hard and get frustrated easily, don't give up. Designing web sites is not easy. And don't feel bad if you don't understand something. There is tons of help in the web community. Stick with it and everything will work out. Treehouse has a great service here and for the price, you're getting some of the best teachers/instructors in the business. The help is there.

You'll get much more out of these projects if you really take your time and work them out. Anyone can copy and paste an answer. It's about going out and finding out "what" the answer is. Not what someone else's answer is.

The answer is 1.66666666667%. Its margin/width multiplied by 100.

That's odd Benjamin, glad to see that it works but that's not something that was explained to us. Logically it makes sense I suppose, but still some people (like me) are horrible at anything math-related, and things like this have to be pointed out.

Anyway, thank you for the help I'm going to go try it.

I'm just like Jason, I really don't understand how this works

lol i copyed and paste every number, that every one posted and it still says its wrong, what is the right answer so i can move on !

I believe the formula is straight forward: Target / Content = Result

10px (target) / 640px (.cake context) = 0.015625 (move decimal and get 1.5625%)

1.5625% should be the correct answer for the .filling margin question.

No need to do any subtraction.

Try 640 (cake context) - 10px (for the padding) == 630px (new cake context)

10px / 630px == ???

that works ;)

I divided 640 by 480, got the answer of 1.33% so I've tried that and it's still incorrect, but it's the same method as I used to work out the answer of cake... Why's this not working??

I'm having problems with this too, it just doesn't seem to want to work and I know I'm doing it right.

Heh, thanks Benjamin! Although I agree with Brianna that that requires a bit of implied knowledge. :)

No worries :) I did do a search to help me but I understand now why it works, because if you attempt to add the margin within the confines of the padding you'll end up sending the site out of proportion.

Maybe try doing this using your Smells Like Bakin' site will help you understand why this isn't possible? & then you'll appreciate this rule :)

Also @TreeHouse maybe you should add something about this or emphasize on this during the video.

Let's look at the math ...

10 / 640 = 0.015625 or 1.5625%

10 / (640 - 10 ) = 0.0158730158730159 or 1.58730158730159%

If you multiply 0.015625 * 640 you get 10.0 If you multiple 1.58730158730159 * 640 you get 10.15873015873018.

Most browsers will drop fractional pixels so in both cases you happen to end up with the same answer, however if the numbers were larger the amount you would be off in you calculation would be larger.

yeh it work, but wow, how the hell that was worked out, or done i do not know am just going to carry on and ignore that before i get a headache

Is there someone from Treehouse that can answer this?

Someone mentioned that something is implied somewhere along the way. The questions mentions margins - both sides. So you have to include both sides of the box when subtracting margins from from the total width. This should give the correct answer.

10px/640 = 1.25%

margin of .cake divided by width of .icing by pixel is equal to your answer, that's how I got my answer.... :)

@Cena -

It looks like you rounded your answer, so the math came out wrong.

10 / 640 is not 0.0156 it's actually 0.015625.

Remember to use all of the decimal places when converting from pixels to percentages, don't round.

Hello everyone, I was also having a little bit of trouble with this one. To convert the padding on .cake from pixels to percentages, we need to divide the padding by .cake width.

In this cake it would be: 10 / 600. Then multiply by 100.

Hope this helps.