This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
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.
You need to sign up for Treehouse in order to download course files.Sign up