3 row div layout - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Row

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

Description

3 row div layout

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
.header {<!--from  w  w  w.j a  v a 2s  .co m-->
   position:   absolute;
   top:      0px;
   height:     50px;
   width:      100%;
   background: #f00;
}
.footer {
   position:   absolute;
   bottom:      0;
   height:     50px;
   width:      100%;
   background: #00f;
}
.cssBody {
   position:   absolute;
   top:      50px;
   bottom:      50px;
   width:       100%;
   background: #0f0;
}

      </style> 
   </head> 
   <body> 
      <div class="header"> 
         <p>Header</p> 
      </div> 
      <div class="cssBody"> 
         <p>Hello World</p> 
      </div> 
      <div class="footer"> 
         <p>Footer</p> 
      </div>  
   </body>
</html>

Related Tutorials