Recipe 9.5. Creating a Fixed-Width Multicolumn Layout with Floats


Problem

You want to create a three-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 (see Figure 9-13):

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

Next, wrap the div elements that compose the main and left columns in another div element and set the value of the id attribute to enclose. Also, wrap another div element around the entire set of div elements, setting the value to frame:

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

Figure 9-13. The default rendering of the page


Set the width of the page, using an id selector for the frame div element:

#frame {  margin-left: 20px;  width: 710px; }

Next, set the column div elements as well as the div element with the id value of enclose to float (see Figure 9-14):

#columnMain {  float: right;  width: 380px; } #columnLeft {  float: left;  width: 150px; } #columnRight {  float: right;  width: 120px; } #enclose {  float:left;  width:560px; } #footer {  clear: both;  padding-top: 1em;  text-align: center; } 

Figure 9-14. Three-column layout with fixed column widths


Discussion

Because the width of the columns is set in pixels, the columns are fixed. To display the columns, you need an extra div element wrapped around the main and left columns. With this extra div element, which contains an id attribute value of enclose, the main and left columns as a whole are set to float to the left. And inside the enclose div, the main column is aligned to the right while the left column is aligned to the left.

See Also

Recipe 9.4 on creating a three-column layout with flexible columns.




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