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.
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:
<div id="wrapper">
<div id="header">
Header content
<div id="inner">
<div id="main">
Main content
<div id="sidebar1">
Left sidebar content
<div id="sidebar2">
Right sidebar content
<div id="footer">
Footer 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.
Search WWH ::

Custom Search