Web Design in a Nutshell, 3rd Edition

Floating Three Columns

This example uses floated elements to create a three-column layout (a main content column flanked by left and right sidebars) with optional header and footer (Figure 24-4). The advantage of floating is that you can set the footer to start below the longest column without knowing its height ahead of time (usually not possible). Remember that with floating, the order that the elements appear in the source document is significant. To keep this example straightforward, the content div has been moved between the sidebar divs in the source.

Figure 24-4. Three-column layout using floats

The basic structure of the markup for the layout is shown here. In this example, all of the elements have been placed in a container div so the width of the entire layout can be specified. A border has been added to the container to reveal its edges.

    <div id="container">
     
    <div id="masthead">
    Masthead and headline
    </div>
     
    <div id="links">
    list of links
    </div>
     
    <div id="main">
    Main article...
    </div>
     
    <div id="news">
    Announcements...
    </div>
     
    <div id="footer">
    copyright information
    </div>
     
    </div>

The style sheet floats the links, main, and news div elements to the left. The result is that they accumulate against the left edge of the containing block, thus creating three columns. The clear:both property has been added to the footer to make sure it starts below all of the floated elements. ...