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

Posted by Jeremy Houtsma
Jeremy Houtsma
971 Points

Creating Flexible margins challenge

The Creating Flexible margins challenge is driving me nuts on the calculations side this is the code
p { margin: 0; } body { color: #fff; } .container { max-width: 800px; }

  .icing {
    background-color: #B4C34F;
    width: 100%; /*800px*/
    padding: 10px;
  }
  .cake {
    background-color: #f8748f;
    width: ; /*640px*/
    margin: 10px;
    padding: 10px;
  }
  .filling {
    background-color: #4FB69F;
    width: 75%; /*480px*/
    margin: 10px;
    padding: 10px;
   }

the challenge is using icing as your context set the width to em.

The equation is target / context = answer . So if you divide the target 640px by context 800px you get 0.8 and move the decimal over to make a margin of 80%..that doesn't work.

The next challenge then puts the target at 480px and the context at 640px...

I can't seem to get a right answer here.

Help!

3 Answers

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

If you have a chance can you link the challenge you are working on?

Jeremy Houtsma
Jeremy Houtsma
971 Points

http://teamtreehouse.com/library/websites/build-a-responsive-website/creating-a-fluid-foundation/creating-flexible-margins-2

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

This threw me for a second too. Reread the question. You have the right concept you are just applying it to the wrong thing :)

Using .icing as your context, convert the margins on .cake from pixels to percentages.

Jeremy Houtsma
Jeremy Houtsma
971 Points

I tried it but am still getting the wrong answer. wouldnt't it be 10/640 = 1.56%

Shawn Denham
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points
Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

if you look at .cake you have a (target) margin of 10px.

Your context is .icing which has a width of 800px. So if you divide 10/800 you get 0.0125 and when you move the decimal point you get.....

:)

ps. with 640px you would be using .cake as your context. Your context is the container that your div sits in, in this case .icing

Jeremy Houtsma
Jeremy Houtsma
971 Points

Figured it out. I forgot to tell you I had finished the first task and was referencing the next task! Sorry! Thank you for your help!

Shawn Denham
.a{fill-rule:evenodd;}techdegree
Shawn Denham
Python Development Techdegree Student 17,801 Points

Awesome!