CSS Layout How to - Create Equal height columns

Question

We would like to know how to create Equal height columns.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.main, .sidebar {<!-- w w  w  .  j a v  a  2 s.c om-->
  float: none;
  padding: 20px;
  vertical-align: top;
}

.container {
  display: table;
}

.main {
  width: 400px;
  background-color: LightSlateGrey;
  display: table-cell;
}

.sidebar {
  width: 200px;
  display: table-cell;
  background-color: Tomato;
}
</style>
</head>
<body>
  <div class="container clearfix">
    <div class="main">Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat
      pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est
      ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat
      elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus
      massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum
      ante.</div>
    <div class="sidebar">Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat
      pharetra orci, at vestibulum lorem ante a felis.</div>
  </div>
</body>
</html>

The code above is rendered as follows: