HTML and CSS Reference
In-Depth Information
Now we just need to rework the main div
Actually, there's not much reworking to be done. We're just adding a
margin like we did with the float version. So, change the right margin
of the main
<div>
to be 330 pixels, like you did last time.
#main {
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
margin: 0px 330px 10px 10px;
}
All you need to do is make that change to your margin, and then save.
But before we take this for a test drive, let's think about how this is going
to work with the absolutely positioned sidebar.
We're positioning the sidebar to be 1
28 pixels from
the top, and up against the right sid
e of the page.
Keep in mind, the sidebar has 10 pix
els of margin
on the right, so the background colo
r will show
through that like before.
The ma
in <div> is flowed
just be
low the header,
so it w
ill align with the
top of
the sidebar. Also,
it has
a right margin
that is
the same size
as the
sidebar, so all
its inlin
e content will
be to t
he left of the
sidebar
. Remember that
the flo
wed elements
don't k
now about the
absolut
ely positioned
elemen
ts at all, so
the inl
ine content in
the flo
wed elements
doesn't
wrap around the
absolut
ely positioned
elemen
ts.
10-pixel top margin
108 pixels for the header. You can
see this height set in the CSS.
div id=“header”
10-pixel bottom margin
div id=“sidebar”
div id=“main”
The sidebar needs to be
128 pixels from the top
because that's exactly
how much room the
header takes up, including
margins.
div id=“footer”
You
might want to think about what happens to t
he
foot
er. Because flowed elements don't know abou
t
abso
lute elements, we can't use “clear” anymore.
