HTML and CSS Reference
In-Depth Information
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
where necessary.
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).