title: Making two floating divs match height
body: <p>I know this has been asked somewhere else, but I can't find the solution.  I have a simple layout.  A container Div with two floating divs inside.  The left div holds the navigation and has a background image.  The right div has a solid background and is dynamic based on the content of each page.  I am not having issues with the content div.  My problem is I want the left div to "stretch" vertically to match the height of the content div.  What is happening is the left is only stretching to the min-height value.  Here is my CSS:</p>
  
  <pre><code>#containerTemp {
  margin-left:auto;
  margin-right:auto;
  width:1000px;
  min-height:100px;
  height:auto;
  }
  
  #containerNavigation    {
  width:210px;
  float:left;
  background-image:url(../images/template/linkbgd.gif);
  background-repeat:repeat-y;
  min-height:500px;
  height:100%;
  }
  
  #containerContent   {
  width:790px;
  background:#FFFFFF;
  background-repeat:repeat-y;
  float:right;
  min-height:500px;
  height:100%;
  }
  </code></pre>
  
  <p>You can see the issue by visiting this page: <a href="http://www.athensfireandrescue.org/?pid=7" rel="nofollow">http://www.athensfireandrescue.org/?pid=7</a></p>
  
  <p>I am sure it's something simple, but I can't put my finger on it.  Sorry for the redundant question, but my searches just didnt' turn up viable solutions.</p>