HTML and CSS Reference
In-Depth Information
Test drive
As usual, save your “starbuzz.css” file and then
reload “index.html”. You should now see a
nice gutter between the two columns. Let's
think through how this is working one more
time. The sidebar is floating right, so it's been
moved as far to the right as possible, and the
whole
<div>
has been removed from the
normal flow and is floating on top of the page.
Now the main content
<div>
is still taking
up the width of the browser (because that's
what block elements do), but we've given it a
margin as wide as the sidebar to reduce the
width of the content area. The result is a nice
two-column look. You know the box of the
main
<div>
still goes under the sidebar, but
we won't tell anyone if you don't.
By expan
ding the margin
of the m
ain <div>, we're
creating
the illusion of a
two-colu
mn layout, compl
ete
with a g
utter in between
.
Uh oh, we have
another problem
As you were test driving the
page, you might have noticed
a little problem. If you
resize the browser to a wide
position, the footer comes up
underneath the sidebar. Why?
Well, remember, the sidebar is
not in the flow, so the footer
pretty much ignores it, and
when the content area is too
short, the footer moves right up.
We could use the same margin
trick on the footer, but then the
footer would only be under the
content area, not the whole
page. Geez. So, what now?
We've got a prob
lem. When you re
size your browser
to a
wide position, th
e footer and the
sidebar start to
overlap.