CSS Holy Grail layout - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Layout

Description

CSS Holy Grail layout

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem </title> 
  <style type="text/css">
* {<!--from w w  w  .j  a  va  2  s.  c om-->
   padding:0px;
   margin:0px;
}

html, body {
   width:100%;
   height:100%;
}

#page {
   width:100%;
   height:100%;
   position:relative;
}

#page>#header {
   position:absolute;
   top:0px;
   left:0px;
   right:0px;
   height:65px;
   background:Chartreuse;
}

#page>#body {
   position:absolute;
   top:65px;
   left:0px;
   right:0px;
   bottom:65px;
}

#page>#body>#left {
   position:absolute;
   top:0px;
   left:0px;
   bottom:0px;
   width:193px;
   background:yellow;
}

#page>#body>#center {
   position:absolute;
   top:0px;
   left:193px;
   right:193px;
   bottom:0px;
}

#page>#body>#right {
   position:absolute;
   top:0px;
   right:0px;
   bottom:0px;
   width:193px;
   background:blue;
}

#page>#footer {
   position:absolute;
   bottom:0px;
   right:0px;
   left:0px;
   height:65px;
   background:pink;
}
</style> 
 </head> 
 <body> 
  <div id="page"> 
   <div id="header"></div> 
   <div id="body"> 
    <div id="left"></div> 
    <div id="center"></div> 
    <div id="right"></div> 
   </div> 
   <div id="footer"></div> 
  </div>  
 </body>
</html>

Related Tutorials