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.
n
The
#sitenav
rules in Listing 13.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
.
n
Figure 13.4 shows the results of linking this style sheet to the HTML file from Listing 13.1
FIGURE 13.4
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?
