Layout 2 columns with 100% height - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

Layout 2 columns with 100% height

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Two cols fit to the highest content height</title> 
  <meta charset="utf-8"> 
  <style>
html,body {
   margin:0;
   padding:0;
}

#wrapper, #footer {<!--  ww  w .  java  2s . c  o  m-->
   margin:0px auto;
   width:961px;
   border:2px solid Chartreuse;
}

#col1, #col2 {
   display:table-cell;
   vertical-align:top;
   width:11px;
   min-height:100%;
   height:100%;
}

#col1 {
   border:2px solid yellow;
}

#col2 {
   border:2px solid blue;
}

#footer {
   height:31px;
}
</style> 
 </head> 
 <body> 
  <div id="wrapper"> 
   <div id="col1">
     a a a a a a a a a a 
   </div> 
   <div id="col2">
     asdf asdf asdf 
    <br> adsf adsf adsf asdfadf 
    <br> adsf daf adsf aasdfasd 
   </div> 
  </div> 
  <div id="footer">
    I'm the footer 
  </div>  
 </body>
</html>

Related Tutorials