HTML and CSS Reference
In-Depth Information
Test drive
Go ahead and add the clear property to
your “starbuzz.css” file in the footer rule,
and then reload “index.html”. You'll see that
when the screen is wide, the footer now stays
below the sidebar. Not bad!
Now, at this point the page is looking pretty
good, but there are still a few improvements
we can make. For instance, we'd like each
column to come down to meet the footer
so they are even—notice, as it is now, there
is a gap either between the main content
and the footer (if the browser window is set
wide), or the sidebar and the footer (if the
browser is set to a normal width). But fixing
this isn't that easy
using
float
, so instead,
we're going to move on and look at a few
more ways to lay out these pages using other
CSS techniques. As you're going to see,
there are many ways to do things in CSS,
and each method has its own strengths and
weaknesses.
Now
our footer
problems are
solved. Th
e
foote
r will alway
s be below t
he sidebar,
no
matt
er how narr
ow or wide
the browser
.
What's important to you is that you
understand the techniques so that you can
apply them when and where you need to.
Q:
Can I float to the center?
A:
No, CSS only allows you to float an
element to the left or right. But if you think
about it, if you were to float to the center,
then the inline content under the floated
element would have to be flowed around both
sides of your element, which would be quite
tricky to get to work in a browser. But one of
the new layout solutions that will be coming
in future versions of CSS may provide a way
to do it—we'll have to wait and see.
Q:
Do margins collapse on floated
elements?
A:
No, they don't, and it's pretty easy
to see why. Unlike block elements that
are flowed on the page, floated elements
are just, well, floating. In other words, the
margins of floated elements aren't actually
touching the margins of the elements in the
normal flow, so they can't be collapsed.
But this raises a good point, and identifies a
common error in layouts. If you have a main
content area and a sidebar, it is common to
set a top margin on each. Then, if you float
the sidebar, it still has a margin, and that
margin won't be collapsed with whatever is
above it anymore. So you can easily end up
having different margins on the sidebar and
on the main content if you don't remember
that floated elements don't collapse margins.
