Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
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.
Video review
- 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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 div 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up