CSS two column layout using float resulting in unequal heights of columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

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

Description

CSS two column layout using float resulting in unequal heights of columns

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#container {<!--  w  ww.  j  ava  2  s .  c  o m-->
   width: 960px;
   margin: 0 auto;
   background-color: pink;
}
#content-holder {
   display:table;
}
#content {
   display:table-cell;
   width: 660px;
   background-color: #ccc;
}
#navigation {
   display:table-cell;
   width: 300px;
   background-color: #eee;
}
#navigation a {
   display: block;
   padding: 0 0 10px 0;
}
#footer {
   clear: both;
   background-color: pink;
   padding: 10px;
}


      </style> 
 </head> 
 <body> 
  <div id="container"> 
   <div id="header"> 
    <h1>header</h1> 
   </div> 
   <div id="content-holder"> 
    <div id="content"> 
     <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p> 
     <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p> 
    </div> 
    <div id="navigation"> 
     <a href="#">Nav item</a> 
     <a href="#">Nav item</a> 
     <a href="#">Nav item</a> 
     <a href="#">Nav item</a> 
    </div> 
   </div> 
   <div id="footer">
     Footer 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials