Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Mark Wilkie
Mark Wilkie
7,427 Points

Flexible Margins Code Challenge

Hi guys, I'm working my way through the Responsive Website track and am on the Flexible Margins part. I am understanding the instructions but am having trouble with this:

  .container {
    max-width: 800px;
  }

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

The margin for the .filling div is 10px, and have converted it to percentage using the formula given in the video, and every time I get 1.56%. However, the code generator is saying that my answer is incorrect.

I have worked it out as follows: 10 / 640 = 0.015625

0.015625 = 1.56%

Am I missing something here? Or is there a problem with the code generator? Thanks in advance.

4 Answers

Mark Wilkie
Mark Wilkie
7,427 Points

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

Second part.

The context is the width of the .cake container not the .filling div itself.

Agh, didn't mean to post a new answer. Should've commented on your answer. Apologies.

No worries I just got it to pass. But I had to take out the padding first to make it pass

Width = 640px - 10px(Padding) = 630px
    10 / 630 * 100 = 1.58%

I use em for the responsive units see this article for more information

Mark Wilkie
Mark Wilkie
7,427 Points

Ah yes that's worked a treat. I had no idea that the padding had to be subtracted from the width of the div. Nevertheless that's stopped me from going crazy. Thanks!

No problems mark it as best answer to let other know. Thanks Mark Wilkie

Do you have a link to the question? Also isn't the width 480px for the filling div, thus

10 / 480 = 2.08%
James Barnett
James Barnett
39,199 Points

> I had no idea that the padding had to be subtracted from the width of the div.

You can't actually. It only appears to work due to how the math works out.


Consider an element 400px wide with a margin of 100px.

Instead a better way to do it is round up to 3 decimal places.

I never knew it either, wouldn't it depend on the box-sizing setting as to whether or not you would need to remove the padding before doing the target / context.

Also James Barnett do you have any advice on the question i tagged you in here

Mark Wilkie
Mark Wilkie
7,427 Points

I'm not sure I fully understand...or I think I do but I'm not sure. There is no box-sizing: border-box; property anywhere in the CSS, so surely the width should still be 640px, not 630px?

Well it may not be in that CSS but It maybe taken into account in the answer to the question. I am a little confused over it myself. I would tag the course tutor in here and they should be able to give clarity.

That should definitely be given some clarity. This wasn't in the video?