HTML and CSS Reference
Fixing the two-column problem
At this point, you might be realizing that page layout is a bit of an art—we've
got a set of techniques for laying out block elements, but none of them is
perfect. So, what we're going to do is solve our problem 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, each with its own advantages.
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
Th e first t hing to
re member i s that th e
si debar is f loating o n
th e page. T he main
co ntent ar ea extend s
al l the way under it .
So, w hat if we give the main
conte nt area a right m argin
that is at leas t as big a s the
sideb ar? Then its conte nt will
exten d almost to the s idebar,
but n ot all th e way.
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 sho w
through. And that's what we're
looking for (flip back a few pages
and you'll see).