title: CSS: Div not extending with child divs
body: <p>I have a div which contains 3 columns (each as a div). The problem is that the height of the parent div is not extending with the height of the columns. </p>
  
  <p>Here are the styles in question:</p>
  
  <pre><code>#content{
  background: #fff;
  clear: both;
  color: #333;
  padding: 10px 20px 40px 20px;
  overflow: auto;
  }
  
  #leftcol { 
  position:absolute;
  float:left;
  top:285px;
  z-index:100;
  background-color:#EEEEEE;
  padding:5px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  }
  
  #rightcol {
  position: absolute;
  right:208px;
  top:285px;
  width:177px;
  background-color:#EEEEEE;
  padding:5px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  }
  
  #centercol {
  margin-left: 288px;
  margin-right:200px;
  background-color:#EEEEEE;
  padding:5px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  }
  </code></pre>
  
  <p>I think it's the absolute positioning in the left and right columns that is messing things up. Every other page that doesn not use the column styles works fine. The height of the parent div extends with what is inside it.</p>
  
  <p>Can someone help me out please?</p>
  
  <p>Jonesy</p>