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
Follow along to see the CSS box model properties and values used to create the scrolling box.
Resources
- Introducing the Box Model – CSS Layout
Hey there, how'd it go?
0:00
Were you able to write most or all of
the box model properties and values for
0:01
this practice session?
0:04
If not, no worries, you can watch my
solution, compare it to what you wrote,
0:06
and then try to recreate it yourself.
0:09
The goal was to get the box
model of the box element
0:11
to match what's shown in box.png.
0:14
Now let's walk through the solution.
0:17
First up,
to give an element a fluid width,
0:19
you set its width property
to a percentage value.
0:23
In this case, I set width to 90%,
then set the height value to 300 pixels.
0:25
Now to prevent the width from
getting wider than 600 pixels,
0:33
I set a maximum width using the max
width property and the value 600 pixels.
0:37
Next, I applied 20 pixels of padding on
all four sides using the padding shorthand
0:47
property, which can apply all four values
at once, and I use the value 20 pixels.
0:53
Then, to set the border styles,
I used the border shorthand property and
1:04
set the value to 2 pixels solid, and
set the color to the hex value, 8292b1.
1:10
Next, to center the box component
horizontally on the page,
1:23
I used the margin shorthand property and
set the value to auto,
1:26
which automatically calculates equal
margins for each side of the box.
1:30
Now, applying a fixed height of 300 pixels
to box caused its contents to overflow.
1:45
So I used the overflow property to
handle the overflowing content.
1:52
And setting the value to auto prevents
the contents of the box from overflowing
1:57
by clipping or
cutting out any overflowing content.
2:02
So any time there's content
that's not immediately visible,
2:05
the browser provides a scroll bar to
let you scroll and view the content.
2:08
You could have also used the value scroll,
which will always display a scroll
2:14
bar instead of letting the browser
decide when to display it.
2:19
And to make sure that you're just
displaying a vertical scroll bar,
2:25
you can use the property overflow-y.
2:30
Finally, the box has an extra 44
pixels applied to its total width and
2:33
height, because of the padding and
border with values applied to it.
2:37
But we need box to be exactly 300 pixels
tall and no wider than 600 pixels.
2:40
To adjust this, you could manually
subtract 44 pixels from the max width and
2:45
height values of box.
2:51
But instead I challenged you to use a CSS
box model feature that automatically
2:53
includes any border width and
padding values into the total width and
2:56
height of an element.
3:00
And that feature is box sizing,
which, as its name suggests,
3:01
alters the size of a box.
3:05
In the style sheet,
I used the box-sizing property.
3:08
And setting the value to
border-box forced the padding and
3:11
border width values into the specified
width and height of box.
3:15
So now if you inspect the box
element in your development tools,
3:22
you should see that the dimensions
match the diagram shown in box.png.
3:26
And your page should look similar to mine.
3:31
I hope you were able to complete
this practice session successfully.
3:36
If not, why not start over and
try to write the properties and
3:39
values without looking at my version?
3:42
I'm also going to teach you more
about the box sizing property and
3:44
layout in my CSS course.
3:46
So I'll see you soon and happy coding.
3:48
You need to sign up for Treehouse in order to download course files.
Sign up