Creating Multicolumn Layouts with CSS
This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
Example 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; left: 0px">
Text Column 1
</div>
<div id="middlecolumn" style="position: absolute; width: 172px; left: 186px">
Text Column 2
</div>
<div id="rightcolumn" style="position: absolute; width: 172px; left: 372px">
Text Column 3
</div>
<!--Nested divs end -->
</div>
)
Figure 21.1 The main content div of this layout has a nested div for each of the columns of text.
Follow these steps to create the nested divs:
-
Take the width of the main content div, and divide by the number of columns you want to create. In Figure 21.1, the main content div is 560 pixels wide, so 560 divided by three columns is roughly 186 pixels. This is the unadjusted width of each column.
-
You need whitespace between the columns, so knock a few pixels off the width you calculated in Step 1. Fourteen pixels is a good amount of whitespace, so 186 minus 14 gives you a width of 172 pixels per column.
-
You need the horizontal position of each column as expressed as an offset from the left side of the parent div&8212;in this case, the main content holder. The first column is always 0 pixels from the left. The next one falls at the original width you calculated in Step 1, or 186 pixels from the left. The next one falls at twice that width, or 372 pixels from the left, and so on and so on, depending on how many columns you have.
-
Write the code for the nested divs using the values from the previous steps. The Toolkit that follows gives you a template.