CSS Layout How to - Create Elastic 3 column layout

Question

We would like to know how to create Elastic 3 column layout.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.main_container {<!--from   ww  w . ja va2  s.  com-->
  display: table;
  width: 100%;
}

.left_bar {
  display: table-cell;
  width: 100px;
  background-color: lightgray;
}

.right_bar {
  display: table-cell;
  width: 100px;
  background-color: lightgreen;
}

.content {
  padding: 0 20px;
}
</style>
</head>
<body>
  <div class='main_container'>
    <div class='left_bar'>left bar</div>
    <div class='content'>
      <p>Elastic content that sometimes makes the page longer or
        shorter</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Integer facilisis velit ut neque tempor quis cursus tortor suscipit.
        Curabitur rutrum magna vitae arcu pharetra eget cursus ante
        accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat
        laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit
        quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit
        sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec
        a enim sapien. Sed ultrices ligula ac neque vulputate luctus.
        Suspendisse pretium pretium felis, in aliquet risus fringilla at.
        Nunc cursus sagittis commodo.</p>
    </div>
    <div class='right_bar'>right bar</div>
  </div>
</body>
</html>

The code above is rendered as follows: