- CSS Reset with Normalize 5:24
- Creating a Layout Wrapper 3:27
- Why Vertical Margins Collapse 3:42
- Centering Page Content and Creating a Full-width Header 4:48
- Layout Wrapper Challenge 2 objectives
- Using a Mobile First Approach 6:21
- Creating a Sticky Footer 5:07
- Getting Started with CSS Layout Review 6 questions
Preview
Video Player
00:00
00:00
Centering Page Content and Creating a Full-width Header
4:48A 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.
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