2 column layout with header and footer, left column has fixed width - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer Column

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

Description

2 column layout with header and footer, left column has fixed width

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  gc-nomade</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
html,<!--from  w w  w .j  a  v  a2  s . c  o m-->
body,
.wrapper,
.tble {
   width:100%;
   height:100%;
   margin:0;
   box-sizing:border-box;
}

.wrapper,
.tble {
   display:table;
   table-layout:fixed;
   border-collapse:collapse;
}

.tbcell,
.content,
.left-sidebar {
   display:table-cell;
}

header,
footer,
.middle {
   display:table-row;
   height:0;
   background:lightblue;
}

.container,
aside,
main {
   padding:2em;
}

.middle {
   height:100%;
   background:lightgreen;
}

.tble {
   direction:rtl;
   border-top:solid;
   border-bottom:solid;
}

.tble>* {
   direction:ltr;
}

aside {
   border-right:solid;
   width:649px;
   background:pink
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <header class="header"> 
    <div class="container tbcell">
      header 
     <br> of any heights 
    </div> 
   </header> 
   <div class="middle"> 
    <div class="container tble"> 
     <main class="content">
       content 
     </main> 
     <aside class="left-sidebar"> 
      <nav class="nav">
        nav on 
       <b>left</b> -sidebar 
      </nav> 
     </aside> 
    </div> 
   </div> 
   <footer class="footer"> 
    <div class="container tbcell">
      footer 
     <br> of any heights 
    </div> 
   </footer> 
  </div>  
 </body>
</html>

Related Tutorials