css - フッターがコンテンツの真下に配置されていない - 大きな隙間が開いているか、コンテンツの真ん中に配置されているように見える

Question

このフッターがあり、その上にコンテンツ div があります (別の div に囲まれて、素敵なパッド付きの境界線を作成します)。何らかの理由でフッターがコンテンツの直後に配置されていないか、コンテンツが非常に長い場合、フッターがコンテンツの途中に表示されているように見えます。

html:

   <div class="content-wrapper clearfix">
  <div id="content">
  {% if template == 'list-collections' %}
    {% include 'collection-listing' %}
  {% else %}
    {{ content_for_layout }}
  {% endif %}

  {% unless template contains "customer" or template contains "cart" %}
    {% include 'col-widgets' %}
  {% endunless %}
  </div>
</div>
</div><!-- /.content -->
<!-- Footer -->
<footer id="bottom">

CSS:

.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;
  }

問題の写真: