Create equal height columns in pure CSS - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Create equal height columns in pure CSS

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
 <head> 
  <style>

#rightsideBG{<!--   w  w  w. j  a v  a 2 s . c  o  m-->
   float:right;
   background:silver;
   width:300px;
   border: 3px dotted silver; 
}
#leftsideBG{
   float:left;
   background:gold;
   width:100px;
   margin-left:-100px;
   border: 3px dotted gold; 
}

      </style> 
 </head> 
 <body> 
  <div id="rightsideBG"> 
   <div id="leftsideBG">
     test test test test
   </div> 
  </div>  
 </body>
</html>

Related Tutorials