HTML and CSS Reference
In-Depth Information
Strategies for your CSS layout toolbox
As you've seen, there are a variety of methods you can use to lay out your
pages using HTML and CSS. And we didn't have to change the HTML much
to change the layout of the page; other than moving a piece of content around
(for handling the floating sidebar), and adding a couple of
<div>
s (for the
table display layout), you handle the
presentation
of your content entirely with
your CSS. That's really the idea: your HTML should be all about
structuring
your content, and the CSS is what handles the layout. Which method you
choose for doing that layout is up to you and is going to depend on the kind of
layout you choose and how flexible you want it to be.
Let's review.
The Floating Layout
We used
float
to lay out the lounge page and float the elixirs
<div>
to the right of the main content in the page. In this case,
float
was perfect because we wanted the main content to flow
around the elixirs
<div>
, which it did just beautifully. We haven't
used it this way yet, but
float
also works great for floating
images within a paragraph of text, and having the text flow
around the image.
We then used
float
to float the sidebar
<div>
in the Starbuzz
page, and used
clear
to make sure that the floating sidebar
didn't overlap with the footer.
The big downside is that we have to move the entire
<div>
we're
floating above the main content of the page, which isn't always
optimal if that ordering doesn't reflect the relative importance of
the content in the page. Another potential downside is that it's
impossible to create two equal columns of content with
float
,
so if that's your goal, you'll need another solution.
The Jello Layout
Next we created a
frozen
layout by wrapping a fixed-size
<div>
around all the content in the page, and then we made it
jello
by allowing the margins to expand with the
auto
property
value. This makes for a great-looking layout, and lots of pages
on the Web use this design; for instance, you'll see a lot of blogs
set up this way. This also solved the problem of our content
ordering. The disadvantage here is that the content doesn't
expand to fill the entire browser window (which many people
don't find to be a disadvantage at all).
