This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
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
A wrapper is commonly used to center a layout on the page. The wrapper keeps a layout from looking too wide or too narrow depending on the device or viewport width. This video covers two common ways to create a wrapper in your layout.
Video review
- Giving the wrapper a width prevents the layout from stretching too wide.
- Setting the left and right margins to the value
autocenters the wrapper in the browser.
- One advantage to using
<body>as the wrapper is that you don’t have to add an extra<div>in your markup to contain your layout. - If you want to give your page a full background color or image, you'll need to apply it to the
<html>element, and you can't place any elements outside of the<body>.
- Using a wrapper
<div>is more appropriate if your site has elements that need to be placed outside the wrapper.
In web design, a wrapper is commonly used
to center the layout on the page and keeps
0:00
it from looking too wide or too narrow,
depending on the device or viewport width.
0:04
Web designers and developers also
refer to this as a container.
0:10
Wrapper and container are generic
terms used to describe an element
0:13
that holds your layout within certain
boundaries and centers it on the page.
0:17
With a wrapper you control the width of a
layout for easier reading and line length.
0:22
To follow along using
the latest workspace,
0:27
launch the workspace on this page.
0:30
In the latest style.css file, I applied
background colors to the header and
0:32
footer and included simple styles for
the body and links.
0:38
You can see those styles when
you preview the workspace.
0:43
There are two common ways to create
a container for your layout.
0:46
Using the already existing body tag, or
0:50
adding a div to wrap around or
contain the other HTML in the page.
0:53
So first I'm going to use the body
tag as the page's main wrapper.
0:58
At this point you should be familiar with
the width and margin CSS properties.
1:03
So back in my stylesheet I'm going to give
the body wrapper a fluid width of 70%.
1:08
And I'm going to set
the margin value to 0 auto.
1:17
Giving the body wrapper a width prevents
the layout from stretching too wide and
1:22
setting the left and
1:27
right margins to the value auto
centers the wrapper in the browser.
1:28
One advantage to using the body as
a wrapper is that you don't have to
1:33
add an extra div element in your markup.
1:36
But if you want to give your
page a full background color or
1:39
image, you'll need to add
it to the HTML element,
1:43
since it's the parent of the body and
the root of the document.
1:46
Now if your site has elements that need
to be placed outside of the wrapper,
1:51
then it would not be appropriate
to add them outside of the body.
1:56
So another common way to add a wrapper
in your layout is with a div element.
2:01
So I'm going to wrap all the content
inside the body element with a div.
2:05
So right below the opening body
tag I'll add a new div and
2:10
give it the class wrapper.
2:15
Then I'll go ahead and cut the closing
div tag, I'll scroll down and
2:18
paste it right below
the closing footer tag.
2:22
I'll save my index file,
then go back to my stylesheet.
2:31
And I'm going to select and
cut the width and
2:35
margin declarations from the body rule.
2:39
And I'll scroll down to
the Layout Containers comment here.
2:41
And I'm going to create a new rule
that targets the class wrapper.
2:45
And paste in the width and
margin declarations.
2:50
All right so I'll save my stylesheet, and
2:54
when I take a look at it in the browser,
you can see that the result is the same.
2:56
But now if I need to place
elements outside of the wrapper,
3:01
it's perfectly valid to do so.
3:05
So I'm gonna stick with the div
wrapper from this point forward.
3:07
There is no right or wrong method here.
3:11
Using the body or
a div is just personal preference, and
3:14
it also depends on
the layout you're building.
3:18
Now there will be some instances where
using a div is more suitable, and
3:20
you'll see some of them in later videos.
3:25
You need to sign up for Treehouse in order to download course files.
Sign up