ptg16476052428 LESSON 15: Advanced CSS: Page Layout in CSS
So what’s happening here?
n The first rule sets the margin and padding of the <body> to 0. This is an important
first rule for layout because browsers typically add one or the other (or both) to any
web page.
n The #sitenav rules in Listing 15.2 are used to turn the ordered list of links into a
horizontal navigation bar.
n The #main section is set to position: relative to become the containing block
around the #content, #sidebar, and footer sections.
n The #main section is also given a large padding on the right, 12em. This is where
the #sidebar will be located.
n Absolute positioning is used to move the #sidebar into the margin, out of its place
in the normal flow of content. It is positioned 1 em to the left of the right edge of
its containing block (#main) by right: 1em, and 1 em down from the top edge of
the containing block by top: 1em.Figure 15.4 shows the results of linking this style sheet to the HTML file from Listing
15.1.It’s still quite rough, but you can see the different sections moved into place. You should
note the silver bars above and below the header. Where did they come from, and why?
The silver bars are the result of the background color set on the <body> showing through.
They are formed because of the default margin properties set on the <h1> and <h3>FIGURE 15.4
Positioning proper-
ties define the
rough outline of the
page.