Left Column

The left col can be used for navigation links, search box etc.



Three Column Pixel Perfect with Header

A 3 column layout with flexible center column but with a header block for logo, banner or links. The left and right divs overlap the center div but fall behind it (this helps avoid a double border).


CSS::

#lh-col{
   position: absolute;
   top: 60px;
   left: 0;
   width: 182px;
   border: 1px solid #333333;
   background: #c0c0c0;
   color: #333333;
   margin: 0;
   padding: 0;
   height: 500px; /*for demo*/
   z-index: 1;
   voice-family: "\"}\""; 
   voice-family:inherit;
   width:180px;
   }
/*for Opera*/
html>body #lh-col {
   width:180px;
   } 

#rh-col{
   position: absolute;
   top: 60px;
   right: 0;
   width: 182px;
   border: 1px solid #333333;
   background: #c0c0c0;
   color: #333333;
   margin: 0;
   padding: 0;
   height: 500px; /*for demo*/
   z-index: 1;
   voice-family: "\"}\""; 
   voice-family:inherit;
   width:180px;
   }
/*for Opera*/
html>body #rh-col {
   width:180px;
   } 

#hdr{
   height:60px;
   background:#eeeeee;
   color:#333333;
   margin:0; 
   }

#c-col{
   position: relative;
   /*include border in margin*/
   margin: 0 181px 20px 181px;
   border: 1px solid #333333;
   background: #ffffff;
   color: #333333;
   padding: 20px;
   z-index: 3;
   }


Right Column

More links?
Advertisements?