HTML and CSS Reference
■ 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.
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.
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:
Left sidebar content
Right sidebar content
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.