title: CSS div not changing height to fit larger child div
body: <p>Okay so I have one container div containing two divs which are floated left and right. The height of these child divs depends on the content inside (currently just text).</p>
  
  <p>The problem is that the height of the container div is not varying correctly to fit the children in; it instead only fits the right hand div in and doesn't size for the left hand.</p>
  
  <p>I have set the height of all the divs to auto. I have also tried setting the size of the larger child div to 100% however that seemed to have no effect.</p>
  
  <p>The three relevant pieces of CSS are included below (I will also give a link to the website so that the rest of the CSS and HTML can be examined if required).</p>
  
  <pre><code>#container{
  /*
  The container, contains the page and the footer
  */
      height: auto;   /* this is the problem child...*/
      width: 1000px;
      margin: auto;
      padding-top: 20px;
      background-color: white;
  }
  
  #content{
  /*
  The container, contains the content of the webpage
  */
      height: auto;
      width: 600px;   
      margin: 10px 10px 0px 10px;
      background-color: white;
      float: left;
  }
  
  #aside{
  /*
  The aside to be used for additional information
  */
      height: auto;
      width: 330px;   
      float: right;   
      margin: 10px 10px 0px 10px;
      padding: 5px 15px 5px;
      background-color: #E8E8E8;
      border-radius: 25px;
  }
  </code></pre>
  
  <p>Basically I want it so that the container will be the right height for the taller of the two children (but in this case it will always be the right hand one I think). However currently it seems to always match the smaller one.</p>
  
  <p>A link to the website where it can be seen: <a href="http://timbrodrick.com/aboutWebsite.html" rel="nofollow">http://timbrodrick.com/aboutWebsite.html</a>
  The "©2014 Tim Brodrick, info@timbrodrick.com," is part of the footer which is a div which starts at the end of the container div.</p>