HTML and CSS Reference
In-Depth Information
■
The only browser that has problems with this technique is IE 6. The comments in left2col_negative.html
explain how to fix them. But the technique is probably best avoided if you still need to support IE 6.
Note
You don't need to use a negative margin to put the sidebar on the right. Just float the main content left as
described in “Floating the Main Content” earlier in this chapter.
■
with so many options for two-column layouts, you're probably wondering which is best. I don't think one
can be singled out as inherently superior. However, my personal choice is floating the main content. If you don't need
to support IE 6 or IE 7, you might prefer to use CSS table display, as described later in this chapter.
Tip
Using Floats for a Three-column Layout
The simplest way to create a three-column layout using floats is to nest two columns inside a
<div>
, which can be
treated as a single element. You then float the
<div>
containing the two columns alongside the third column. The
basic HTML structure looks like this:
<div id="wrapper">
<div id="header">
Header content
</div>
<div id="inner">
<div id="main">
Main content
</div>
<div id="sidebar1">
Left sidebar content
</div>
</div>
<div id="sidebar2">
Right sidebar content
</div>
<div id="footer">
Footer content
</div>
</div>
This structure puts the main content first, inside the
inner<div>
with the left sidebar. The right sidebar
is outside the
inner<div>
, but inside the overall
wrapper<div>
. Figure
12-9
shows how the elements fit
together. The sidebar and main content are floated in opposite directions in the
inner<div>
, so the sidebar
ends up on the left. Then the
inner<div>
and second sidebar are floated left and right, respectively, inside the
wrapper<div>
. The result is a three-column layout with the main content in the middle and two sidebars on the
left and right.
