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 Basics (2014) Basic Layout Width and Height Properties

tarkonis
tarkonis
1,036 Points
Posted by tarkonis
tarkonis
1,036 Points

I don't understand the repercussions of the topic discussed in this video.

For example:

Adding width: 960px property to the primary/secondary content class rule sets the width of those divs to 960px;

Then, you add some padding to the left and right sides to give some "separation" from the margin (I don't understand why you do this either but take it at face value).

So far so good, the div is 960px + its padding giving a total width of 1060px.

What's the problem here? Why do I have to take away 50 pixels from the content area of the div, to make allowances for the 50px of padding I just added to make some separation from the margin?

This lesson has not made a lot of sense to me.

davidanguiano2
davidanguiano2
6,859 Points

It's difficult because he can't quite explain why this matters without going into greater detail regarding advanced layout etc etc --

So this lesson had me scratching my head for the same reason. #guilhatessimplemath

5 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

I think all Guil is saying is be wary of how much width and height you put on the content area of your elements, especially when you have one main container of a specific size. Each element has a default amount of width for content area, margin and padding and settng your own amounts ensures you have control of layout and separation.

But these are all up to you and under your control. :)

Pavle Lucic
Pavle Lucic
10,801 Points
Pavle Lucic
Pavle Lucic
10,801 Points

You will run into issues, for example if overlap container element.

The video is demonstrative to show off the logic of box model and how the padding is affecting on elements dimension.

Cynthia (Sunni) Freyer
Cynthia (Sunni) Freyer
828 Points
Cynthia (Sunni) Freyer
Cynthia (Sunni) Freyer
828 Points

As you keep moving forward in theme development, you'll eventually come across a use case where you'll discover that you're grateful for understanding that padding affects the inside of the box while margin affects the outside. Trust me. It will happen.

Christopher Andrew Kemur
Christopher Andrew Kemur
7,709 Points
Christopher Andrew Kemur
Christopher Andrew Kemur
7,709 Points

i think the problem, the standart width for content div is 960px. so if you adding the padding the width will be more than 960px. but with border-box property you will get width as defined in the width property. so the layout won't be messed up by the padding you just added.

it just my opinion, please correct me if i'm wrong :)

Morten Larsen
Morten Larsen
12,275 Points
Morten Larsen
Morten Larsen
12,275 Points

Anyone capable to explain me what we are trying to archieve in this video? I dont seem to find any answers i the above replys to opening posts questions?