HTML and CSS Reference
In-Depth Information
So what's happening here?
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.
The #sitenav rules in Listing 13.2 are used to turn the ordered list of links into a
horizontal navigation bar.
The #main section is set to position: relative to become the containing block
around the #content , #sidebar , and #footer sections.
The #main section is also given a large padding on the right, 12em . This is where
the #sidebar will be located.
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 13.4 shows the results of linking this style sheet to the HTML file from Listing 13.1
Positioning proper-
ties define the
rough outline of
the page.
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?
Search WWH ::

Custom Search