title: How to adjust the height of the footer automatically
body: <p>How do you adjust the height of the footer based on how long the div content inside the body is?</p>
  
  <p>I've tried searching for a solution like having the position of the footer "fixed" but it isn't what I want because it's like stuck at the bottom of the screen. I want the footer to show when I reach the bottom of the page and change its height automatically when the main_content height changes as well since I've put the height of the main_content to auto. How can I do this?</p>
  
  <p>Here's how it looks like: <a href="http://jsfiddle.net/cherry12345/t62b2qb6/" rel="nofollow">http://jsfiddle.net/cherry12345/t62b2qb6/</a></p>
  
  <p>Heres my code:</p>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div  id="main_content"&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;p&gt;Some text&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          &amp;copy; 2014-2015 example.com. All Rights Reserved.
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>#main_content {
      width: auto;
      height:auto;
      position:absolute;
      top:110px;
      left:400px;
      background: #FFF;
      border:1px solid lightgray;
  }   
  #footer{
      position:absolute;
      bottom:0px;
      width:100%;
      background: #666;
      padding: 24px;
      font-size: 12px;
      color: #CCC;
      text-align: center;
  }
  </code></pre>