HTML and CSS Reference
In-Depth Information
Figure 7-16.
Content pops out of the outer container (absolute positioning).
Later in this chapter we'll refer you to another layout that gets around this problem. For
now, though, we wanted you to at least be aware of this potential hiccup in the layout, as you
may well come across it yourself and wonder about the cause.
In the
body
element for the source code is an
id
:
<body id="cols3">
In the CSS, there's currently nothing making use of that, so we'll make some changes:
body#cols3 #content-wrapper {
padding-left:9em;
padding-right:11em;
}
body#cols3 #navigation {
position:absolute;
top:6.8em;
left:0;
}
body#cols3 #related {
position:absolute;
top:6.8em;
right:10px;
}
Now the CSS is telling the browser to lay out the two
div
s at the sides and add
padding
to
the main content
only
if they are contained in a document with a
body id
of
cols3
. If another
page calls that style sheet but has a different
id
in the
body
(or no
id
at all), it will ignore those styles
and simply present the markup in the order it appears in the source, as shown in Figure 7-17.
