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
Welcome back. How did you do? Let’s go over how I solved this challenge.
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
Welcome back.
0:00
How did you do?
0:01
Let's go over how I solved this challenge.
0:02
For the div with an ID of box, I'll
start by applying 25 pixels of padding
0:06
and set the background
color to lightsteelblue.
0:14
Here's where it gets interesting.
0:26
The instructions specify to make
this box 90% of both the width and
0:28
the height of the viewport.
0:33
Now, if we try using percent values,
you'll notice that works for
0:36
the width but not the height.
0:40
This has to do with the behavior
of block elements in CSS.
0:44
The height of block elements will
always be dictated by the height of
0:48
the content unless we use
a fixed value like pixels.
0:52
However, it is possible to make our box
be 90% of the height of the viewport.
0:56
We just need to switch to a unit
built to accomplish this.
1:02
All right, now our box div is set to 90
vh or 90% of the height of the viewport.
1:09
Though it looks a bit taller
than 90%, doesn't it?
1:15
Open up your browser Inspector and
see if you can figure out why.
1:19
If you said our padding is being added
to the size of our box, well done.
1:25
Let's use the universal selector
to add a box-sizing: border-box
1:31
declaration to eliminate this problem.
1:35
That's better.
1:47
I've included a post from Stack Overflow
in the Teacher's Notes if you'd
1:49
like to read more on why vh worked
here when percentages didn't.
1:52
Our instructions asked us to center
the box div both horizontally and
1:58
vertically within the viewport.
2:03
Let's try solving this by setting
the margin property to auto.
2:06
It looks like margin: auto centered
the box horizontally but not vertically.
2:13
I'm checking out a reading
in the Teacher's Notes
2:19
with more detail on margin: auto.
2:22
And it says the browser will interpret
top and bottom auto margins as 0 pixels.
2:24
So that doesn't really help us.
2:30
Instead, we'll have to get creative
with our viewport units to center
2:33
the box vertically.
2:36
5 vh of top and bottom margin plus
90 vh of content equals 100%.
2:42
That should give us vertical centering.
2:50
All right, styling our image
should be pretty straightforward.
2:55
We'll make it 600 pixels wide and
2:59
give it a 10 pixel solid aliceblue border.
3:03
Next up is our div called text.
3:18
The width is once again 600 pixels.
3:21
The padding is 100 pixels on the top and
50 pixels on the sides.
3:26
We'll add a 25 pixel
solid lightsalmon border.
3:33
And we'll increase the margin by 10
pixels just on the top and bottom.
3:41
And finally set the background
color to floralwhite.
3:48
Hmm. I think I see
3:55
an opportunity to improve
this code using the DRY principle.
3:57
Do you see anywhere I'm repeating myself?
4:02
That's right, the width declaration.
4:07
Let me move those into
a separate selector.
4:09
That's better. Preview your
page in the browser, and great.
4:24
Since we added the box-sizing:
border-box declaration
4:30
to the universal selector
earlier in this exercise,
4:34
these two boxes are the same
width even though they
4:38
contain different amounts of
border and padding.
4:41
That box-sizing declaration
sure is a useful one.
4:46
I hope this exercise is
helping you feel more
4:50
comfortable when working
with the CSS box model.
4:53
Keep on practicing, and
I'll see you next time.
4:56
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