Create one column layout with header and footer - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Create one column layout with header and footer

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>

body{<!-- w  w  w .  j  a va  2s .  co  m-->
   color:#00000;
   margin-left:0px;
   margin-right:0px;
   margin-top:0px;
   margin-bottom:0px;
}
#body{
   background-color:green;
}
#header{
   width:800px; 
   height:150px;
   color:#fff;
   margin-left:auto;
   margin-right:auto;
   margin-top:0px;
   margin-bottom:0px;
}
#navigation {
   width:798px;
   height:51px;
   margin-left:auto;
   margin-right:auto;
   margin-top:0px;
   margin-bottom:0px;
   border-style:solid; 
   border-left:1px;
   border-right:1px;
   border-top:0px;
   border-bottom:1px;
   border-color:#000000;
   text-align:center;
   background-color: yellow;
}
#main {
   width:798px; 
   height:800px;
   color:#fff;
   background-color:blue;
   margin-left:auto;
   margin-right:auto;
   margin-top:0px;
   margin-bottom:0px;
   border-style:solid; 
   border-left:1px;
   border-right:1px;
   border-top:0px;
   border-bottom:0px;
   border-color:#000000;
   text-align:center;
}
#footer {
   width:798px; 
   height:100px;
   color:#fff;
   background-color:red;
   margin: 0 auto;
   border-top: 3px solid white;
}
#Facebook {
   float:right;
}
#Twitter {
   float:right;
}
#LinkedIn {
   float:right;
}


      </style> 
 </head> 
 <body> 
  <div id="body"> 
   <div id="header">
     &nbsp; 
   </div> 
   <div id="main"> 
    <div id="navigation"> 
     <br> 
    </div> 
   </div> 
   <div id="footer">
     &nbsp; 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials