Fitting middle div between header and footer for two column layout - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer Column

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

Description

Fitting middle div between header and footer for two column layout

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
html, body {
   padding:0;
   margin:0;
   height:100%;
   width:100%;
}

header {<!--   w w  w. j  a  v a2  s  .  com-->
   height:71px;
   background:Chartreuse;
}

footer {
   height:91px;
   background:yellow;
}

#container {
   height:calc(100% - 161px);
}

#content {
   display:inline-block;
   background:red;
   height:100%;
   width:calc(100% - 306px);
}

#nav {
   height:100%;
   display:inline-block;
   background:green;
   width:301px;
}
</style> 
 </head> 
 <body> 
  <header>
    Lorem ip 
  </header> 
  <div id="container"> 
   <div id="content">
     Lorem ips 
   </div> 
   <div id="nav">
     Lorem 
   </div> 
  </div> 
  <footer>
    Lorem ip 
  </footer>  
 </body>
</html>

Related Tutorials