Two column layout with one header and two footers - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer Column

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Footer Column

Description

Two column layout with one header and two footers

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head></head> 
 <body translate="no"> 
  <style type="text/css">
body {<!-- w ww .  jav a 2s  .com-->
   background-color:Chartreuse;
   margin:0;
   padding:0;
}

#container {
   background-color:yellow;
   width:1001px;
   height:1001px;
   padding-top:26px
}

#container .header {
   background-color:blue;
   width:auto;
   height:100px;
   margin-right:26px;
   margin-left:26px;
}

#container .leftsection {
   background-color:pink;
   height:601px;
   width:201px;
   margin-left:26px;
   margin-top:11px;
   float:left;
}

#container .rightsection {
   background-color:OrangeRed;
   height:601px;
   width:746px;
   float:left;
   margin-top:11px;
   margin-left:6px;
}

#container .bottom {
   background-color:grey;
   height:100px;
   width:951px;
   float:left;
   margin-top:11px;
   margin-right:26px;
   margin-left:26px;
   clear:none;
}

#container .footer {
   background-color:BlueViolet;
   width:951px;
   height:100px;
   float:left;
   margin-top:11px;
   margin-right:26px;
   margin-left:26px;
}
</style> 
  <div id="container"> 
   <div class="header"></div> 
   <div class="leftsection"></div> 
   <div class="rightsection"></div> 
   <div class="bottom"></div> 
   <div class="footer"></div> 
  </div>  
 </body>
</html>

Related Tutorials