Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Creating a Layout Wrapper3:27 with Guil Hernandez
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.
- 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
- 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
it from looking too wide or too narrow, depending on the device or viewport width.
Web designers and developers also refer to this as a container.
Wrapper and container are generic terms used to describe an element
that holds your layout within certain boundaries and centers it on the page.
With a wrapper you control the width of a layout for easier reading and line length.
To follow along using the latest workspace,
launch the workspace on this page.
In the latest style.css file, I applied background colors to the header and
footer and included simple styles for the body and links.
You can see those styles when you preview the workspace.
There are two common ways to create a container for your layout.
Using the already existing body tag, or
adding a div to wrap around or contain the other HTML in the page.
So first I'm going to use the body tag as the page's main wrapper.
At this point you should be familiar with the width and margin CSS properties.
So back in my stylesheet I'm going to give the body wrapper a fluid width of 70%.
And I'm going to set the margin value to 0 auto.
Giving the body wrapper a width prevents the layout from stretching too wide and
setting the left and
right margins to the value auto centers the wrapper in the browser.
One advantage to using the body as a wrapper is that you don't have to
add an extra div element in your markup.
But if you want to give your page a full background color or
image, you'll need to add it to the HTML element,
since it's the parent of the body and the root of the document.
Now if your site has elements that need to be placed outside of the wrapper,
then it would not be appropriate to add them outside of the body.
So another common way to add a wrapper in your layout is with a div element.
So I'm going to wrap all the content inside the body element with a div.
So right below the opening body tag I'll add a new div and
give it the class wrapper.
Then I'll go ahead and cut the closing div tag, I'll scroll down and
paste it right below the closing footer tag.
I'll save my index file, then go back to my stylesheet.
And I'm going to select and cut the width and
margin declarations from the body rule.
And I'll scroll down to the Layout Containers comment here.
And I'm going to create a new rule that targets the class wrapper.
And paste in the width and margin declarations.
All right so I'll save my stylesheet, and
when I take a look at it in the browser, you can see that the result is the same.
But now if I need to place elements outside of the wrapper,
it's perfectly valid to do so.
So I'm gonna stick with the div wrapper from this point forward.
There is no right or wrong method here.
Using the body or a div is just personal preference, and
it also depends on the layout you're building.
Now there will be some instances where using a div is more suitable, and
you'll see some of them in later videos.
You need to sign up for Treehouse in order to download course files.Sign up