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 CSS Layout Techniques Grid Layout Creating the Grid Container

Posted by Mike Booth
Mike Booth
9,704 Points

How does Guil add padding-left and padding-right values to columns when width + gutters already = 100% of the container?

In this video, Guil creates a 12-column grid layout and container. When the child columns within this container add up to 12, their width, plus the width of any gutter margins equals 100% of the container. This makes sense.

For example, if he had a single .grid-12 column in there, it's width would be 100% and this is the first (and only) child so it doesn't get a left margin.

However, at 2m26s, Guil adds 10px horizontal padding to the columns. Why doesn't this exceed the width of the container?

For example, if he had a single .grid-12 column in there, it's width would now be 100% + 10px left + 10px right, which would break the layout.

Please can someone explain what I've missed as I'm struggling to understand this.

Thanks!

3 Answers

Mike Booth
Mike Booth
9,704 Points

OK I've figured this out. It is because Guil adds the following to all elements (indicated by the star):

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

The border-box style includes padding and border in the total width. This is not the default behaviour of almost every browser.

2btrzt9ior
2btrzt9ior
15,232 Points

Yeah, I apologize. The way I described the box model was how it used to work in IE. I'm so used to using the border-box property I forgot that isn't how it works by default. I'll edit my original post.

2btrzt9ior
2btrzt9ior
15,232 Points
2btrzt9ior
2btrzt9ior
15,232 Points

edit: I've gotten so used to setting the box-sizing property to border-box that I forgot this isn't how it works by default. My explanation below is only valid when box-sizing is set to border-box.

Hi Mike,

If I understand your question correctly, I think your confusion stems from a misinterpretation of the box model. You can think of any element as its content, padding, border, and margin. When you define the width of an element, such as a div, you are actually defining the width of the combined content, padding and border. When you add padding to an element, it will actually add space to the inside of that element, which can have a squishing effect on e.g. text. Margin, on the other hand, is added in addition to the width you define.

So, for example, if your CSS for a div with a class of main which contains text is as follows:

.main {
     width: 100px;
     padding: 10px;
     border: 10px solid black;
     margin: 10px;

The actual width of the space your text occupies will only be 60px. This is because the padding and border each take up 10px of your defined width on both sides. On the other hand, the width your element occupies in your document will be 120px, because there is a margin of 10px on either side of your element.

Mike Booth
Mike Booth
9,704 Points

Hi Isaac.

That contradicts my understanding. I always thought total width = width + padding + margin.

The w3c page seems to support my understanding:

http://www.w3schools.com/css/css_boxmodel.asp.

In the example on that page, the total width of 250px is calculated as the width (220px) + padding (2 x 10px) + border (2 x 5px).

Quote: Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins.

Rohit Gopalan
Rohit Gopalan
81,945 Points
Rohit Gopalan
Rohit Gopalan
81,945 Points

Each column is 65px wide according to the video. The padding left/right values as 10px which will be applied within each column which helps the display of list or text elements within a html element like 'body' or 'div'.

Simply, you have a certain width to work with to apply padding, margins etc like a column with a width of 65px. These paddings/margins do not alter the width of a column and subsequently the width of the web page(s).

I hope you understand what I'm talking about