Footer does not sit directly under content - seems to leave large gaps, or sit in middle of content

Question

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.

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

pics of the problem:

Can you show a url or fiddle? The css selectors in your example doesn't seem to match the html id & class attributes. — Jason Lydon, Apr 03 '13 at 15:56

score 0 · Answer 1 · answered Apr 03 '13 at 16:10

0

I think this is enough to move you in the right way. The min-height was the start of the problem.

.wrapper {
    margin: 0 auto;
    /* min-height: 100%; REMOVE THIS */
    overflow: hidden;
    padding: 0 20px;
    text-align: left;
    width: 810px;
}

#content {
    background-color: #FFFFFF;
    height: auto;
    /* position: absolute; REMOVE THIS */
    width: 810px;
}

#col-main {
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: 1px solid #D5DCE1;
    height: auto;
    line-height: 2;
    margin: 0 5px 5px; /* UPDATE THIS */
    padding: 30px;
    position: relative;
    z-index: 1;
}

answered Apr 03 '13 at 16:10

Jason Lydon

7,074
1
35
43

Also for the OP, on col-main, float: center doesn't exist. – Michael Apr 03 '13 at 16:13
Also, better to put padding on #content then to put margin on #col-main. – Michael Apr 03 '13 at 16:16
yes! this gets the footer underneath the content, but eliminates the border I had in the content.. or I should say the padded border I had.. – user1833002 Apr 03 '13 at 16:23
@user1833002 You need to adjust some styling to get that border back. I suggest removing the margin on #col-main and adding 5px of padding to #content. That will fix your padded border. – Michael Apr 03 '13 at 16:29
Try putting the #content {padding:5px} & #col-main {margin:0;} – Jason Lydon Apr 03 '13 at 16:29
THANKYOU THANKYOU!! ALL FIXED – user1833002 Apr 03 '13 at 16:41

Footer does not sit directly under content - seems to leave large gaps, or sit in middle of content

1 Answers1