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