title: CSS float height auto adjustments
body: <p>I have here my CSS code. My problem is that when the content has many things it adjust its height greater than the navigation's height. What i want is when one of this float height adjust it includes the other as well.</p>
  
  <pre><code>&lt;div id="main"&gt;   
      &lt;div id="navigation"&gt;&lt;/div&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
      &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code below:</p>
  
  <pre><code>#main{
      width: 960px;
      height: 500px;
      margin: auto;
  }
  #navigation{
      float: left;
      width: 200px;
      background-color: #C7E1BA;
  }
  #content{
      float: right;
      width: 740px;
      background-color: #F6E4CC;
      padding: 10px;
  }
  #content, #navigation {
      height: 100%;
  
  }
  #footer{
      clear: both;
      width: 960px;
      height: 100px;
      background-color: #628B61;
      margin: auto;
  }
  </code></pre>