title: Footer does not sit directly under content - seems to leave large gaps, or sit in middle of content
body: <p>I have this footer, and above it is a content div (nestled in another div to create a nice padded border). For some reason the footer doesn't fall in line directly after the content, or if the content is quite long, the footer seems to appear in the middle of the content. </p>
  
  <p>html:</p>
  
  <pre><code>   &lt;div class="content-wrapper clearfix"&gt;
    &lt;div id="content"&gt;
    {% if template == 'list-collections' %}
      {% include 'collection-listing' %}
    {% else %}
      {{ content_for_layout }}
    {% endif %}
  
    {% unless template contains "customer" or template contains "cart" %}
      {% include 'col-widgets' %}
    {% endunless %}
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.content --&gt;
  &lt;!-- Footer --&gt;
  &lt;footer id="bottom"&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.wrapper{
    width: 810px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
    min-height:100%;
    }
  .ie6 .wrapper{ height: 100%; } 
  
        #content {
        width: 810px;
        background-color:#fff;
        position: absolute;
        height:auto;
        } 
  
  #col-main{
    -moz-box-sizing: border-box;
      margin-top:0px;
    line-height: 2;
      margin: 5px;
    padding: 30px;
    background-color: #FFFFFF;
    float: center;
    position: relative; z-index: 1;
    height: 200px;
    background-color: #FFFFFF;
    border: 1px solid #D5DCE1;
    height:auto;
    }
  </code></pre>
  
  <p>pics of the problem:</p>
  
  <p><img src="https://i.stack.imgur.com/M7DXe.jpg" alt="http://i.stack.imgur.com/758Dw.jpg">
  <img src="https://i.stack.imgur.com/M7DXe.jpg" alt="http://i.stack.imgur.com/M7DXe.jpg"></p>