Centering Page Content and Creating a Full-width Header4:48 with Guil Hernandez
A common layout structure in web design involves a centered content area with a header and footer that take up the full width of the page.
- Depending on your design, you may want the header and footer in your layout to stretch from edge to edge of the browser so the left and right sides won't appear cut off.
- This approach makes the layout feel open and less constrained.
- One approach is to create a wrapper the main content and an inner wrapper for the content inside the header and footer.
- You can leave 'outer' elements like the header and footer at their default 100% width.
- It's common to have more than one wrapper on a page and even to have containers inside of containers.
A common layout structure you'll see in web design involves a centered 0:00 content area with a header and footer that take up the full width of the page. 0:05 Depending on your layout, you may want the header and 0:10 footer in your layout to stretch from edge to edge of the browser window. 0:13 That way, if the header and footer have a background color or image, the left and 0:18 right sides won't appear cut off. 0:23 For example, this travel website uses a full width header and 0:26 footer while keeping all the content centered on the page. 0:30 This makes the layout feel more open, and less constrained. 0:35 Now take a look at how this layout would look if the top nav bar and 0:40 header background didn't stretch the full width of the browser. 0:44 Looks kind of strange, doesn't it? 0:49 In an earlier video, you learned how it's common practice to use a wrapper to 0:53 limit the width of your content as the viewport widens. 0:58 And I mentioned that choosing to use a div or 1:01 the body as a layout wrapper depends on the layout you're building. 1:04 And there are some instances where using a div is more suitable. 1:08 This is one of those instances. 1:12 So one approach is to create an inner wrapper for the content and 1:14 leave outer elements like the header and footer at 100% width. 1:19 It's common to have more than one wrapper on a page, and 1:24 even to have containers inside of containers. 1:29 So now, I'm going to separate the layout into three sections, 1:32 the header, the main content area, and the footer. 1:37 In the html, I'll start by deleting the wrapper div I created earlier. 1:43 So I'll select and delete the opening div tag to the wrapper, then 1:49 I'll scroll down and delete the closing div tag right below the footer element. 1:54 Next I'm going to create a wrapper around the content inside main-header. 2:01 Web designers and developers also refer to wrappers as containers. 2:08 So this time I'm going to create a div and give it the class container. 2:13 Then I'll add the closing div tag for 2:20 the container div right below the closing ul tag. 2:23 Next I'll also wrap the page's main content in a container div. 2:31 So right above the h2 I'll create a new development and 2:36 give it the class container. 2:41 Then I'll add the closing div tag for 2:45 this container div right above the opening footer tag. 2:47 Now, the footer element doesn't have much content. 2:58 It only has one span element and one line of text. 3:02 So I'm not going to add a container in the footer. 3:06 Instead, I'll simply center align the footer content with CSS. 3:09 And later, if I decide to add more content in the footer, 3:13 then I can include a container. 3:16 So looking at this new page structure, see if you can guess which elements will need 3:19 the width and margin properties that will center the content on the page. 3:23 In the layout, main-header and main-footer should take up the full width of the page. 3:29 So we don't need to give these elements a width or 3:36 margin because they'll expand to a width of 100% by default. 3:39 But the container element, inside main-header, and 3:45 the main content container need to be narrower and 3:49 centered on the page, like we styled the wrapper div earlier. 3:52 So, I'll go back to my workspace and open up the style.css file. 3:56 And then I'll scroll down to the wrapper rule. 4:01 And I'll change the wrapper class selector to container, 4:05 because remember, we deleted the wrapper div from the HTML earlier. 4:10 I also want to center align the content inside the footer, so in the main 4:15 footer rule, I'll add a text-align property and set the value to center. 4:21 So now, any content placed inside the header and 4:27 a middle container will remain centered in the browser, no wider than 70%. 4:31 While the header and footer stretches the full width of the browser window. 4:37 Up next, you'll learn why it's important to 4:41 build layouts with mobile devices in mind from the start. 4:44
You need to sign up for Treehouse in order to download course files.Sign up