CSS Layout How to - Create column with fixed width and footer

Question

We would like to know how to create column with fixed width and footer.
Answer


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {<!--from ww w.  j ava 2  s.c o m-->
  width: 960px;
  border: solid;
}

.column1of2 {
  float: left;
  width: 620px;
  margin: 10px;
}

.column2of2 {
  float: left;
  width: 300px;
  margin: 10px;
}
</style>
</head>
<body>
  <h1>This is a test. </h1>
  <div class="column1of2">
    <h3>This is a test. </h3>
    <p>This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    </p>
    <p>This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    </p>
    <h3>Further Innovations</h3>
    <p>This is a test. This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. 
    This is a test. This is a test. This is a test. This is a test. </p>

  </div>
  <div class="column2of2">
    <h3>Bicycle Timeline</h3>
    <ul>
      <li>1817: Draisienne</li>
      <li>1865: Velocipede</li>
      <li>1870: High-wheel bicycle</li>
      <li>1876: High-wheel safety</li>
      <li>1885: Hard-tired safety</li>
      <li>1888: Pneumatic safety</li>
    </ul>
  </div>
  <div style="clear: both"></div>
</body>
</html>
The code above is rendered as follows: