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.