Head First HTML with CSS

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 has been removed from the
normal flow and is floating on top of the page.
Now the main content 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 still goes under the sidebar, but
we won’t tell anyone if you don’t.
By expanding the margin
of the main , we’re
creating the illusion of a two
column layout, complete with
a gutter in between.
We’ve got a problem. When you resize your browser to a
wide position, the footer and the sidebar start to overlap.
layout and positioning
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. So, what now?
you are here 509