Width, Height and Overflow Properties Code Challenge

Yeyy it worked! I was so annoyed! Thanks Guil ^^,

Hey Richard,

I would love to help you out with this challenge. I actually was doing this challenge last night and this same task was giving me trouble too. What a coincidence. What you will need to do to force the padding into the width of the div is to first select the div in your CSS. Like this:

.main{}

Next you are going to add a special propriety "box-sizing" and add "border-box" so it will end up looking something like this:

.main{box-sizing: border-box;}

Good luck and hope this helps

Dan

Hi Richard Mockford,

The Code Challenge question is asking you to use a certain property that subtracts any borders or padding from the total box width.

I start talking about it around the 8min mark in this video.

I also wrote an article on this for the Treehouse Blog :)

I know this is an old forum post, but for Michael Lesniak, just typing,

a {
  display: inline-block;
  width: 100px;
}

div { 
  box-sizing: border-box; 
  max-height: 150px; 
  overflow: auto;
} 

for all 5 challenges should get you through w/o fail. Although it's good practice, you're typing way too much. I tried using "overflow: scroll;" at first too, but since the text is only truncated vertically, "auto" will do the trick and only give you a vertical scroll bar. That question is tricky, but if you read it again, it says "if and where they are needed" in regards to scroll bars.

Cheers!

it's works .main { max-height: 150px; box-sizing: border-box; }

Dan Ridley,

I didn't want to give the full answer here, but I guess that helps too :)

Sorry Guil Hernandez My bad. Helped a little too much there

I was re-watching the video when Dan replied so it dosent matter to much. As i figured it out by watching the video again.

Thank you both Guil Hernandez Dan Ridley for all your help.

No worries - thanks for the help, Dan Ridley. Nice work, guys!

It doesn't work for me :(. Help please. This is what I typed

 a {  
    display:inline-block; width:100px;
 }
.main {
     box-sizing:padding-box;
 }

thx:P

This is the correct answer. This one is a pain.

.main {
  box-sizing: border-box; 
}

nav a {
    display: inline-block;
  width: 100px;
}

.main {box-sizing: border-box;}

Correct answer for challenge question:

Currently, the width of the div with the class 'main' is set to 400px, but the padding applied is adding an extra 40 pixels to its total width. Add a property that forces the padding into the width of the div.

The solution is here:

'''.main { box-sizing: border-box; }

nav a { display: inline-block; width: 100px; }'''