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
If not, no worries, you can watch my
solution, compare it to what you wrote,
0:00
and then try to recreate it yourself.
0:00
The goal was to get the box
model of the box element
0:02
to match what's shown in box.png.
0:05
Now let's walk through the solution.
0:08
First up,
to give an element a fluid width,
0:10
you set its width property
to a percentage value.
0:14
In this case, I set width to 90%,
then set the height value to 300 pixels.
0:16
Now to prevent the width from
getting wider than 600 pixels,
0:24
I set a maximum width using the max
width property and the value 600 pixels.
0:28
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