CSS Layout How to - Non event height three column layout

Question

We would like to know how to non event height three column layout.
Answer


<!--   w  w w . j av a  2  s .c  o m-->
<html>
<head>
<style>
#frame {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  background-color: #ffffff;
}

#page {
  margin: 0px 10px 10px 10px;
}

#header {
  background-color: #cccccc;
  padding: 10px;
  height: 120px;
}

#navigation {
  background-color: #efefef;
  padding: 10px;
  height: 40px;
}

#footer {
  background-color: #cccccc;
  padding: 10px;
  height: 40px;
  clear: both;
  border-top: 20px solid #ffffff;
}

/* 3 columns */
.column1of3, .column2of3, .column3of3 {
  float: left;
  width: 280px;
  background-color: #cccccc;
  padding: 10px;
  margin-top: 20px;
}

.column1of3, .column2of3, .columns1and2of3 {
  margin-right: 20px;
}

.columns1and2of3, .columns2and3of3 {
  float: left;
  width: 600px;
  background-color: #cccccc;
  padding: 10px;
  margin-top: 20px;
}
</style>
</head>
<body>
  <div id="frame">
    <div id="page">
      <div id="header">header</div>
      <div id="navigation">navigation</div>
      <div class="column1of3">Lorem ipsum dolor sit amet, consectetur
        adipiscing elit.</div>
      <div class="column2of3">Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Quisque vel sem odio, et tincidunt magna. Nam
        malesuada justo non risus ullamcorper eget dignissim erat viverra.</div>
      <div class="column3of3">Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Quisque vel sem odio, et tincidunt magna. Nam
        malesuada justo non risus ullamcorper eget dignissim erat viverra.
        Mauris viverra massa ac libero feugiat tempor. Cras scelerisque
        fermentum dui et feugiat. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per inceptos himenaeos.</div>
      <div id="footer">footer</div>
    </div>
  </div>
</body>
</html>
The code above is rendered as follows: