CSS-based layout - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Layout

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

Description

CSS-based layout

Demo Code

ResultView the demo in separate window 

<html>
 <head></head> 
 <body> 
  <header> 
   <style>
html, body {
   text-align:justify;<!--from  w w w. j  a v  a2s .co  m-->
   height:100%;
}

.layout {
   display:table;
   height:100%;
}

.layout .columns-container {
   display:table-row;
   height:100%;
}

.layout .columns-container .column {
   display:table-cell;
   height:100%;
}

.layout .top {
   display:table-row;
   height:100%;
}

.layout .bottom {
   display:table-row;
   height:100%;
}

.layout .top .main {
   display:table-cell;
   height:100%;
}

.layout .top .footer {
   display:table-cell;
   height:100%;
}

.one-third {
   width:34%;
   float:left;
   height:100%;
}

.two-thirds {
   width:67%;
   height:100%;
   float:right;
}

.main-footer {
   height:100%;
}

.nav {
   background:red;
   padding:21px;
}

.main {
   background:green;
   padding:21px;
   height:100%;
}

.footer {
   background:brown;
   padding:21px;
   height:151px;
}
</style> 
  </header> 
  <div class="layout"> 
   <div class="columns-container"> 
    <div class="column one-third"> 
     <div class="nav"> 
      <h2>Lorem ipsum dol</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lac</p>Lorem ipsum dolor sit amet, consectetur adi 
      <ul> 
       <li>Lorem</li> 
       <li>Lorem</li> 
       <li>Lorem</li> 
      </ul> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>&nbsp;</p> 
      <p>Lor</p> 
     </div> 
    </div> 
    <div class="column two-thirds"> 
     <div class="layout main-footer"> 
      <div class="top"> 
       <div class="main" role="main"> 
        <h1>Lorem ipsum </h1> 
        <p>Lorem ipsum dolor sit amet, cons</p> 
        <p>Lorem ipsum</p> 
       </div> 
      </div> 
      <div class="bottom"> 
       <div class="footer"> 
        <section id="colophon" class="site-info" role="contentinfo"> 
         <h2>Lorem </h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
        </section> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials