This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
With the box-sizing property, we can alter the way the browser calculates an element's total width and height. We're also able to set the maximum width of an element with the max-width property.
Quick Reference
box-sizing
Alters the default CSS box model used to calculate widths and heights of elements.
max-width
Sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value set for max-width.
Related Articles
So, the best way to compensate for padding
and border width values,
0:01
expanding the total size of an element, is
with a new CSS feature called box-sizing.
0:04
With the box-sizing property, we can alter
the way the total width and
0:10
height are calculated.
0:13
So, let's go back to our primary and
secondary-content rule.
0:15
And right beneath the width property,
let's go ahead and
0:19
add the property box-sizing by typing
box-sizing.
0:24
Now, the value border box forces the
padding and
0:29
borders into the width and height of the
element instead of expanding it.
0:34
So, if we change our width back to the
desired value of 960 pixels,
0:38
when we save our style sheet and refresh
our page,
0:45
we can see that the final width of the
rendered containers is
0:49
now the actual 960 pixel width we defined
regardless of that padding value.
0:52
And now we can do the same for our header
height.
0:59
So let me copy this box-sizing declaration
we just wrote, and
1:01
let's scroll up to our main header rule
and paste the box-sizing property.
1:05
So, let's save our style sheet.
1:14
Let's go back to our layout and refresh.
1:16
And when we inspect the header element,
1:19
we can see that it's back to being 850
pixels tall.
1:22
It's no longer affected by that 170 pixels
of top padding.
1:25
So, as we can see, box-sizing is wonderful
because it dynamically subtracts
1:31
the borders and paddings of each side from
the width and height properties we set so
1:36
it makes it easier to define flexible
widths and heights in our project.
1:42
Now, the good thing is that we can declare
box-sizing once in our
1:47
style sheet with the universal selector,
1:51
then box-sizing will sort of work its
magic throughout our project.
1:53
So, let's scroll up to the top of our
style sheet.
1:57
And right above the body rule,
2:00
let's create a new rule using the
universal selector.
2:02
And inside the universal rule, I'll go
ahead and
2:06
paste the box-sizing declaration we copied
earlier.
2:09
Now, in the selector stage, I mentioned
that the universal selector for
2:13
the most part is considered bad practice.
2:17
Well, universal selectors are bad only
when they are misused, but
2:20
I'd say this is a good use case for it.
2:24
So, now with box sizing defined
universally,
2:26
it's one less thing to worry about when
laying out our page.
2:29
So, now that it's defined up here, we can
actually go back and
2:32
remove the repeated box-sizing
declarations in our main header rule and
2:36
in our primary-secondary content rule.
2:40
So, let's go ahead and remove it from the
main header rule, and
2:43
we'll scroll down and remove it from the
primary and secondary-content rules.
2:48
And while we're here, let's change the
width back to a percentage value.
2:54
So, instead of 960 pixels, let's now set
it to 75%.
3:00
And one last thing we'll need to do for
3:07
our content width is prevent it from
becoming too wide.
3:09
Now currently, the width is now set to be
75% of the total browser width,
3:13
so it's very fluid and constantly
adjusting to the browser's width.
3:19
But what if we're viewing the page on a
screen that's much wider.
3:23
Well, the content may display too wide for
good readability in that case.
3:27
So, because of that,
3:33
we're able to limit the width of our
content with the max-width property.
3:34
So, let's go back to our primary and
secondary-content rule and
3:39
let's give these content elements a
max-width property.
3:43
And we don't want them to get any wider
than 900 pixels, so
3:49
let's set the max-width value to 900
pixels.
3:54
Now, what this does is, once our content
div expands to 900 pixels wide,
3:57
the max-width value sort of overrides that
width value.
4:03
So, the elements stay fixed at 900 pixels
even if the browser keeps getting wider.
4:07
So, in our browser, notice the content is
fluid at 75% of the browser width.
4:14
But once the browser detects that the divs
are 900 pixels wide,
4:22
they stop expanding right about here and
they remain fixed at 900 pixels.
4:26
So, this prevents the width of our content
from becoming wider than it needs to be.
4:31
But if we once again resize the browser to
a narrower width,
4:36
the content is once again fluid at 75%
wide.
4:41
[BLANK_AUDIO]
4:44
The max-width property is also commonly
used to create responsive images.
4:47
Now, you might have noticed that the two
images in
4:52
our content at times are too wide for
their containing div elements.
4:54
So, for instance, here we're reducing the
width of our browser, and
5:00
we can see these images breaking out of
their content divs.
5:03
So, to prevent this from happening,
5:07
we can give our image elements a max-width
property.
5:09
So, let's go back to our style sheet and
let's scroll up here to our base styles.
5:12
So, right here beneath the h3 rule,
5:19
let's target the image elements on our
page by using the img type selector.
5:21
Then we're going to add a max-width
property and
5:28
we're going to set the max-width to 100%.
5:32
So, when we set this max-width value to
100%, then refresh the page,
5:37
notice how the image is now fluid, and
5:42
it proportionally adjusts according to the
width of its containing div.
5:45
So again, a really handy feature for
creating responsive imagery.
5:51
And we'll see the benefits of this in a
later video when we
5:55
lay these out as columns.
5:58
Now, before we move on, let's go back to
our style sheet and apply a bottom margin
6:01
to our images to create some separation
between the image and the content below.
6:07
So, right beneath the max width
declaration, let's add
6:11
a margin-bottom property and let's set the
margin bottom value to 20 pixels.
6:15
[BLANK_AUDIO]
6:21
All right.
6:25
That looks a lot better.
6:26
[BLANK_AUDIO]
6:27
You need to sign up for Treehouse in order to download course files.
Sign up