HTML and CSS Reference
In-Depth Information
Adding More Layout Styles
We've already sized and centered the
.main
element. If you've been following along with
the code examples, you'll notice, however, that the header, promo (which is the big photo be-
low the header), and footer sections are not aligned with the
.main
element. So, let's align
those now:
.header-inside {
width: 1020px;
margin: 0 auto;
}
.promo {
width: 1020px;
margin: 0 auto;
}
.footer-inside {
width: 1020px;
margin: 0 auto;
}
First, to help with the look we're trying to achieve, we've added an inner element inside our
<header>
and
<footer>
elements. Those two new elements in the HTML are classed as
.header-inside
and
.footer-inside
, respectively. We're doing this so we can cen-
ter the content inside the header and footer, while allowing the background of those elements
to expand horizontally to the edges of the browser window.
You can see this demonstrated in
Figure 2.8
.
Figure 2.8. The footer has a set width, but the background color expands to the full width of the window
