Current Classes | General Reference

General Reference

Two Columns using CSS

Introduction

Most web pages these days consist of more than one vertical column. The most common arrangement is to have a column containing the navigation on the left or right and a wide section for the main content next to it. These multiple-column layouts used to be made with tables, but for a variety of reasons tables have given way to cascading style sheets. Here are two variations on the two-column layout using style sheets.

Layout 1: Flexible Widths

1. Go to http://www.lipsum.com/ and generate 4 paragraphs of "Lorem Ipsum" Greeking. This isn't necessary of course, it's just to give you some ready-made content so that you can see how this works. Create a new HTML document. Save it in the root folder as flexColumns.html. In the body, create the following markup (make sure you put the Lorem Ipsum text where indicated):

   <div id="header">
     <h1>Generic Header</h1> 
   </div>  
   
   <div id="columnLeft">
     <p>Put the first 2 "Lorem Ipsum" paragraphs here </p>
   </div>
   
   <div id="columnRight">
     <p>Put the 3th & 4th "Lorem Ipsum" paragraphs here </p> 
   </div>  
   
   <div id="footer">
     <p>Copyright 2006</p> 
   </div>    

   Note that you are dividing the document into 5 separate sections using <div> tags. Each <div> tag has an "id," a specific name for which we can write styles that will apply to only that section.

2. Or you can download this template file and use it.
3. Now set up a style sheet, either in the head or as a separate document. If you choose to put it in the head, use the following code:

   <style type="text/css">  
   <!--  
   
   
   -->  
   </style> 

4. Now for the styles themselves:

   #columnLeft {
     width: 70%;
     float: left;
     padding: 0;
   }  
   
   #columnRight {
     width: 28%;
     float: right;
     padding: 0;
   }
   
   #footer {
     clear:both; 
     text-align: center;
     line-height:2em;
     background-color:#FC9;
   }  
   
   p {
     margin: 1em;
   }   

   The styles define the widths of the <div> sections (as a percentage) and positions them by using a "floats" instruction. The "clear" is needed in the footer so that it isn't affected by the floats.

Layout 2: Fixed Widths

1. Create a new HTML document. Save this one as fixedColumns.html
2. In the body, use the same markup as above.
3. The styles are very similar; we simply change the widths to fixed measurements. In addition, I've added a width to the body and centered it using the margin property:

   body {
     width: 960px;
     margin: 0 auto;
   }
   
   #columnLeft {
     width: 600px;
     float: left;
     padding: 0;
   }  
   
   #columnRight {
     width: 310px;
     float: right;
     padding: 0;
   }
   
   #footer {
     clear:both; 
     text-align: center;
     line-height:2em;
     background-color:#FC9;
   }  
   
   p {
     margin: 1em;
   }