Head First HTML with CSS

Fixing the two-column problem
Are you sitting there waiting for us to come riding in on a white horse with
the magic property that solves all this? Well, that’s not going to happen.
This is the point in CSS where page layout becomes more an art – or at
least a set of techniques – than a set of properties that can solve every
problem. So, what we’re going to do is solve this using a common technique
that is widely used. It’s not perfect, as you’ll see, but in most cases it gives
you good results. And after this, you’re going to see a few other ways to
approach the same two-column problem. What’s important here is that you
understand the techniques, and why they work, so you can apply them to
your own problems, and even adapt them where necessary.
So, what if we give the main
content area a right margin
that is at least as big as the
sidebar? Then its content will
extend almost to the sidebar,
but not all the way.
layout and positioning
The first thing to
remember is that the
sidebar is floating on
the page. The main
content area extends
all the way under it.
Then we’ll have separation between
the two, and since margins are
transparent and don’t show the
background image, the background
color of the page itself should show
through. And that’s what we’re
looking for (flip back a few pages
and you’ll see). Let’s make the margin as
wide as the sidebar.
you are here 507