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 alborz
.a{fill-rule:evenodd;}techdegree seal-36
alborz
Full Stack JavaScript Techdegree Graduate 30,885 Points

Trying to wrap my mind around this question (Quiz question in Styling Web Pages and Navigation)

Hi, I completed this quiz a while ago but made sure to make a note of this question because I'm having trouble comprehending the concept.

Here is the question:

"Say we have two floated list items with a width of 45% each. Which of the following declarations, if applied to the list items, will perfectly fill the remainder of the parent element’s width?"

Now, I know the answer to the question; but I don't understand why this is the case? Could someone give me some kind of idea as to why the answer makes sense?

Thanks in advance.

Ricardo Hill-Henry
Ricardo Hill-Henry
38,443 Points

Could you provide the answer? I would assume 55%, but that can vary depending on if there's extra margin, padding, or box-sizing.

alborz
.a{fill-rule:evenodd;}techdegree seal-36
alborz
Full Stack JavaScript Techdegree Graduate 30,885 Points

The answer is - margin: 2.5%. Not sure why though...

4 Answers

Seth McCombs
Seth McCombs
16,767 Points

When you have two items, both at width 45%, they combine to a total width of 90%. But we need to obtain the missing 10%,

When you set margins to 2.5%, this will put a margin of 2.5% on both the left and right of BOTH floated list items, this totals to the missing 10%.

2.5% (Left margin) + 45% (List Item 1) + 2.5% (Right Margin) + 2.5% (Left Margin) + 45% (List Item 2) + 2.5%(Right margin)

John Steer-Fowler
PLUS
John Steer-Fowler
Courses Plus Student 11,734 Points
John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Hi Alborz,

What this means is that because you have two floated items, each with a width of 45%, when these are added together it makes 90% width.

Because you need to have 100% width, what % is remaining? That would be 10% right?

Well there are two elements, if you need to put a margin on each, it would be the 10% divided by two, which is 5%. A margin on both sides of each element would be 2.5% margin.

In this case, the margin is being used to fill up the remaining space.

Does this now make sense?

Keep up the good work

Seth McCombs
Seth McCombs
16,767 Points

Great minds think alike! Cheers! :)

John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Haha they so do.. :P

alborz
.a{fill-rule:evenodd;}techdegree seal-36
alborz
Full Stack JavaScript Techdegree Graduate 30,885 Points

Awesome, thanks guys!

Emmanuel Chikumbindi
Emmanuel Chikumbindi
6,983 Points
Emmanuel Chikumbindi
Emmanuel Chikumbindi
6,983 Points

If you can note that you have 2 list items each at 45% width to give us a total of 90%. Now there is a remainder of 10% which needs to be divided by 4 to give us 2.5%. the no# 4 is of the 2 sides each of the floated list items widths.

Megan Nelson
Megan Nelson
819 Points
Megan Nelson
Megan Nelson
819 Points

I had the same question. Thanks guys!