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 How to Make a Website CSS: Cascading Style Sheets Center the Wrapper

Posted by Rob Cachia
Rob Cachia
6,494 Points

Padding percentage relative to its element's width

In this video 'Center the Wrapper" a padding of 5% is added to left/right sides of its wrapper element, which has a max width of 940px. So, this will be 5% padding of the width of the wrapper element itself. As the width in this case is fixed, how is it that when the browser width is increased the padding also increases – shouldn't it remain relative to its own element, which in this case is fixed? If I remove the padding, the wrapper element's width, which has a background colour orange, remains fixed at 940px.

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  background: orange;
}

1 Answer

Ryno Botha
PLUS
Ryno Botha
Courses Plus Student 4,055 Points
Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

Padding - Sets the space on the interior four sides of an element.

Percentages:

The padding size is relative to the width of that element’s content area (i.e. the width inside, and not including, the padding, border and margin of the element).

So, if your #wrapper is 940px wide, 5% padding = 0.05 × 940pixels = 47 pixels.

(Note that top and bottom padding will also be 5% of the width of the element, not 5% of the height of the element.)

Check:

The Box Model

http://www.w3.org/TR/CSS2/box.html

Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points
Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

Adjusting to the browsers Width Not the #wrappers Width~

Rob Cachia
Rob Cachia
6,494 Points

Thanks Ryno – I understand how we get the 47px padding, and in this video it's only applied to the left & right sides. And in Nick's video he states that 'this will be 5% of the total width of the wrapper element itself'. What doesn't make sense is if the padding is relative to the element's width (which is fixed at 940px), why does the padding still increase in width when the browser's width is increased? Even Nick mentions at the end of his video that 'the padding is changing and adjusting to the width of the browser' – but how can it if it is relative to its fixed width element?

Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points
Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

When you set the width of an element, the element can actually appear bigger than what you set: the element's border and padding will stretch out the element beyond the specified width.

You need to use box-sizing: border box

When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width.

This ensures that all elements are always sized in this more intuitive way.

Since box-sizing is pretty new, you should use the -webkit- and -moz- prefixes for now.

The Box Model Shows you how Padding and Margin effects the Width~

(Padding is the space between the Content and Border)

Check:

http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding

Hope it answers some questions x)

Rob Cachia
Rob Cachia
6,494 Points

Thanks Ryno for your feedback and the link, will check that out! What still doesn't add up here is if 5% padding is added to the right & left sides of a 940px fixed width element, effectively widening it 1034px (it being relative to that element), then in theory when the viewport is widened and narrowed that element should remain at 1034px wide. But when testing this in the browser, that element does get slightly wider and narrower relative to the viewport. If I remove the padding from the element, the element's width remains fixed at 940px, regardless of the viewport width, and does not change at all. This suggests that though padding is relative to its element, it is still somehow influenced by the viewport width.

Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points
Ryno Botha
Ryno Botha
Courses Plus Student 4,055 Points

Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box.

You can learn more:

http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

^^ and No problem, Glad I can help x)

Daniel Gormly
Daniel Gormly
2,875 Points
Daniel Gormly
Daniel Gormly
2,875 Points

god dammit. this is what i was looking for. thanks