Web Design Garage

Chapter 21. Creating Multicolumn Layouts with CSS

Just as you used a nested table to create a multicolumn layout for table-based designs in Topic 20, you use nested div elements to create a multi-column layout in CSS. Drop the nested divs into the main content div of your layout, as in Figure 21.1, and you're golden. The only catch is, your main content div has to be fixed-width. It can't be liquid, or certain browsers choke when you apply the technique given here.

Listing 21.1. View Source for Figure 21.1.

<div id="logo" style="position: relative; width: 560px; height: 100px;"> Banner </div> <div id="container" style="position: relative; width: 560px;"> <!-- Nested divs start here --> <div id="leftcolumn" style="position: absolute; width: 172px; ...