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
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.
Search WWH ::

Custom Search