Recipe 9.7. Creating a Fixed-Width Multicolumn Layout with Positioning


Problem

You want to create a four-column layout with fixed-width columns.

Solution

First, mark up the content with div elements by using the id attributes that contain appropriate values representing their placement on the page:

<div >  [...] </div> <div >  [...] </div> <div >  [...] </div>  [...] <div >   [...] </div>  [...] <div >  [...] </div>

Next, use the position property in each column, setting the value to absolute while setting the placement of the columns with the left and top properties, making sure to use pixels for the units:

#columnLeft {  position: absolute;  left:5px;  width:190px;  top: 44px;  background:#fff; } #columnInnerLeft {  position: absolute;  left: 205px;  width: 190px;  top: 44px;  background: #fff;  text-align: justify;  border-width: 0; } #columnInnerRight {  position: absolute;  left: 405px;  width: 190px;  top: 44px;  background: #fff; } #columnRight {  position: absolute;  left: 605px;  width: 190px;  top: 44px;  background: #fff; }

Discussion

Setting the width of the columns as well as the left and top properties to length units creates the fixed-width columns. This solution is just as easy with two to three or more columns. Remember that anything more than four or five columns may be impractical.

With the solution, the layout is ideal for an image that is equal or less than 44 pixels tall. If you place text within the header, there's the possibility that the text could ruin the layout by making the header appear to go under the columns. This phenomenon occurs because the header is within the flow of the document, while the absolute position takes the column out of the flow.

If this is an issue for a design, first wrap a div element around the columns and set the id value to content:

<div >  [...] </div> <div >  <div >   [...]  </div>  <div >   [...]  </div>   [...]  <div >    [...]  </div>   [...]  <div >   [...]  </div> </div> <!-- end CONTENT -->

Then set the CSS rule for the content wrapper to be positioned relatively:

#content {  position: relative; }

That extra step shores up the header as well as removes the top of the columns.

See Also

Recipe 9.3 on creating a fixed-width two-column layout; Recipe 9.5 on creating a fixed-width multicolumn layout with floats.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net