Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice CSS Box Model Basics!
You have completed Practice CSS Box Model Basics!
Preview
Follow along to see the CSS box model properties and values used to create the scrolling box.
Resources
- Introducing the Box Model – CSS Layout
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up