Creating a Layout 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