Template based on Holy grail css layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html> 

<head> 

<title>css holy grail?</title> 
<style type="text/css"> 
/* FIRST CONTAINER */ 

div {
  background:url(divbg.gif);
}

#cont1 { 
margin-top: 100px; 
padding: 0px; 
float: left; 
width: 45em; 
} 

/* SET FLOATED DIVS TO DISPLAY INLINE TO AVOID POTENTIAL IE ERRORS */ 

#cont1, #cont2, #mainContent, #rightColumn, #leftColumn { 
display: inline; 
  background:#e0e0e0;
} 

#mainContent {
  background:#f0f0f0;
}

/* TO ALLOW FOR THE SAME STYLESHEET TO BE USED FOR VARIOUS LAYOUTS, 
WE'LL ASSIGN AN ID TO THE BODY TAG. BELOW ARE THE RULES FOR PAGE 
DISPLAYS USING ALL THREE COLUMNS, USING ONLY THE LEFT OR RIGHT 
COLUMN WITH THE CONTENT, AND USING THE CONTENT ONLY. */ 

/* LEFT COLUMN, CONTENT AND RIGHT COLUMN LAYOUT */ 

#lcr #cont2 { 
float: right; 
width: 34em;
} 

#lcr #mainContent { 
float: left; 
width: 23em; 
} 

#lcr #rightColumn { 
float: right; 
width: 11em; 
} 

#lcr #leftColumn { 
float: left; 
width: 11em; 
} 

/* LEFT COLUMN AND CONTENT LAYOUT */ 

#lc #cont2 { 
float: right; 
width: 34em; 
} 

#lc #mainContent { 
float: left; 
width: 34em; 
} 

#lc #rightColumn { 
display: none; 
} 

#lc #leftColumn { 
float: left; 
width: 11em; 
} 

/* CONTENT AND RIGHT COLUMN LAYOUT */ 

#cr #cont2 { 
float: left; 
width: 45em; 
} 

#cr #mainContent { 
float: left; 
width: 34em; 
} 

#cr #rightColumn { 
float: right; 
width: 11em; 
} 

#cr #leftColumn { 
display: none; 
} 

/* CONTENT ONLY LAYOUT */ 

#c #cont2 { 
float: right; 
width: 45em; 
} 

#c #mainContent { 
float: left; 
width: 45em; 
} 

#c #rightColumn { 
display: none; 
} 

#c #leftColumn { 
display: none; 
} 

/* ELIMINATE PAGE MARGINS AND PADDING */ 

html, body { 
padding: 0; 
margin: 0; 
} 

/* AND FINALLY THE HEADER, SUBCONTENT AND clear */ 

#header { 
clear: both; /* Has to clear floats to work around another IE bug */ 
position: absolute; 
top: 0; 
left: 0; 
width: 45em; 
} 

#footer { 
width: 45em; 

} 


#subContent { 
clear: both; 

} 

#clear { 
border:none;
background:none;

clear: both; 
border:none;
} 

</style> 

</head> 

<body id="lcr"><!-- Body ID can be changed to switch on or off some of the columns. --> 

<div id="cont1"> <!-- Outside container div --> 
  <div id="cont2"> <!-- Internal container --> 
    <div id="mainContent"> <!-- And here's the main content, center column --> 
      
      <div style="clear:both;">
        <div style="background:#f0a0a0;margin:1em;float:left;width:100px; height:200px"> </div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam suscipit tortor interdum  
        justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  
        quis, molestie vitae, facilisis nec, enim. 
      </div>

      <div style="clear:both;">
        <div style="background:#a0f0a0;margin:1em;float:left;width:100px; height:150px"> </div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam suscipit tortor interdum  
        justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  
        quis, molestie vitae, facilisis nec, enim.         justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  
        quis, molestie vitae, facilisis nec, enim. 
        justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  
        quis, molestie vitae, facilisis nec, enim. 

      </div>

      <div style="clear:both;">
        <div style="background:#a0a0f0;margin:1em;float:left;width:100px; height:250px"> </div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam suscipit tortor interdum  
        justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  
        quis, molestie vitae, facilisis nec, enim.         justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  
        quis, molestie vitae, facilisis nec, enim. 
        justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  
        quis, molestie vitae, facilisis nec, enim. 

      </div>



    </div> <!-- End main content center column --> 
    <div id="rightColumn"> <!-- Start right column --> 
      Praesent venenatis, metus sit amet mattis convallis, neque eros consequat nisl, et volutpat  
      odio enim in lacus. Sed vel orci. Sed orci. Aenean varius wisi vitae metus. Donec mattis  
      nisl eu diam. Praesent at nulla. Cum sociis natoque penatibus et magnis dis parturient montes,  
      nascetur ridiculus mus. 
    </div> <!-- End right column --> 
  </div> <!-- End internal container --> 
  <div id="leftColumn"> <!-- Start left column --> 
    <div style="width:100%;">Aenean sodales sodales arcu. Maecenas rutrum. Curabitur varius nisl in magna. Donec ac dui. In  
    vehicula ligula ut eros cursus auctor. Cras porta, turpis non rutrum tempor, sapien wisi  
    adipiscing risus, vitae elementum leo magna at tellus. Lorem ipsum dolor sit amet, consectetuer  
    adipiscing elit. vehicula ligula ut eros cursus auctor. Cras porta, turpis non rutrum tempor, sapien wisi  
    adipiscing risus, vitae elementum leo magna at tellus. Lorem ipsum dolor sit amet, consectetuer  
    adipiscing elit. vehicula ligula ut eros cursus auctor. Cras porta, turpis non rutrum tempor, sapien wisi  
    adipiscing risus, vitae elementum leo magna at tellus. Lorem ipsum dolor sit amet, consectetuer  
    adipiscing elit. 
    </div>
  </div> <!-- End left column --> 

</div> <!-- End outside container --> 

<div id="header"> Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header </div> <!-- Header is absolutely-positioned. --> 

<div id="clear">
<div id="footer">footer</div>
</div> <!-- clear is set to clear all floats. --> 

</body> 

</html>