HTML and CSS Reference
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
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.