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

HTML Build a Responsive Website Creating a Fluid Foundation Converting Pixels to Percentages

Posted by Sean Kennedy
Sean Kennedy
21,150 Points

I need help with this plz

There is already a forum for this buts its old and confusing 

<!DOCTYPE html>
<html>
  <head>
    <style>

      /* When setting flexible margin on an element, your context is the width of the element's container.
      When setting flexible padding on an element, your context is the width of the element itself. */

      p {
        margin: 0;
      }
      body {
        color: #fff;
      }
      .container {
        max-width: 500px;
      }

      .icing {
        background-color: #B4C34F;
        width:  0.015625.; /*500px*/
      }
      .cake {
        background-color: #f8748f;
        width: 80%; /*400px*/
      }
       .filling {
            background-color: #4FB69F;
            width: 83.33333333%; /*500px*/ 
    margin: 1.6666666666%;
    padding: 10px;
        }

    </style>
  </head>
  <body>
    <div class="container" id="container">
    <div class="icing">
      <p>Icing</p>
      <div class="cake">
        <p>Cake</p>
        <div class="filling">
          <p>Filling</p>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>
Sean Kennedy
Sean Kennedy
21,150 Points

oh yeah here is where im stuck 3 out of 3

.filling { background-color: #4FB69F; width: 83.33333333%; /500px/ margin: 1.6666666666%; padding: 10px; }

5 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Sean;

Let's break this entire challenge down, shall we?

Task 1

Using .container as your context, convert the width of .icing from pixels to percentages.

  1. In the style the width of .container is 500px. For this task, that is our starting point.
  2. The icing class is 500px as well.
  3. To convert this to percentages we take the value for .icing and divide it by the value for .container and convert it to a percentage. So, 500px / 500px = 1 x 100 = 100%

Task 2

Using .icing as your context, convert the width of .cake from pixels to percentages (using the comments as a guide).

  1. Again, in the comments for .icing we are at 500px.
  2. The width of .cake is 400px.
  3. To covert to percentage we take .cake divided by .icing and convert that number to a percentage. So, 400px / 500px = .8 x 100 = 80%.

Task 3

Using .cake as your context, convert the width of .filling from pixels to percentages (using the comments as a guide).

  1. We use the comments for the value of .cake now, which is 400px.
  2. The width of .filling is 300px.
  3. Covert to percent: 300 px / 400 px = .75 x 100 = 75%

I hope that explanation helps.

Happy coding,

Ken

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Sean,

I don't know if you changed the comments but when I try the challenge the comment for .filling says it's 300px. Also, you have a margin and padding assigned to it that wasn't in the challenge.

Your context is .cake which had a width of 400px and your target is .filling which had a width of 300px.

So you'll want to divide 300px by 400px.

I would also get rid of the margin and padding in case it throws off the challenge checker.

Also, you should have had width: 100%; for .icing to pass task 1. I'm not sure how you got passed it without that.

Andy Bradbury
PLUS
Andy Bradbury
Courses Plus Student 4,697 Points
Andy Bradbury
Andy Bradbury
Courses Plus Student 4,697 Points

Your percentage is wrong - you're close!

Remember this is a child of .cake. I won't give you the direct answer but you're very close. Check it out in inspector in Chrome.

Andy Bradbury
PLUS
Andy Bradbury
Courses Plus Student 4,697 Points
Andy Bradbury
Andy Bradbury
Courses Plus Student 4,697 Points

Ken's answer is amazing, great answer.

Sean Kennedy
Sean Kennedy
21,150 Points
Sean Kennedy
Sean Kennedy
21,150 Points

Thanks for all the great tips you guys are so much help!