<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.main_container {
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>
【column】
