Footer NOT sticking to Bottom of page

HTML & CSS
1

I have been tasked to modify a wordpress theme for a project of mine. They are requesting a footer on the bottom of the page. I have been looking through the tutorials of sticky footers ect, but i just cannot get the thing to stick to the bottom of the page. At the moment the footer is apearing at the very top of the page, underneath my header. I have tried to match up the div tags, and it seems that it should work, but it is still not working. Could somebody help me solve this please.

My site is Arts for Life.
The people i am working for, want to stick to the same theme, so i am having to figure out what the original developers mind set was when coding, It’s all so difficult.

My CSS can be found here

My HTML code can be found here

2

Wow… I don’t know how I missed that in FAQ… :frowning:

Off to update the sites… :sick:

3

Yes, the AP divs would be causing a problem just like they would with a typical footer. They can’t push the footer down because they are removed from the page flow.

We tend to stay away from that Ryan Fiat method here at SitePoint because it uses the min-height fast hack and it fails in IE7-8 and Opera. The link you gave to the FAQ Sticky Footer method explains the problems with the fast hack, and the method shown in the FAQ is the only one that works to date in all browsers.

This other article by Paul explains how other methods fail and shows how to set up the sticky footer step by step.

There are basically two ways to go about it but they both use the same min-height bugfix for IE8 and Opera.

Top Border Soak Up Method
Negative Margin Footer Pull Method

The IE8 and Opera bug fixes are pretty simple and they require no empty elements in the html.

body:before {/*Opera min-height 100% Fix*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/*Opera fix*/
}
#wrapper:after {   /* #wrapper:after for IE8 min-height:100% Fix*/
    clear:both;
    content:"";
    display:block;
    height:1%;/*IE8 fix*/
    font-size:0;
}

With those fixes in place it will give you something like this.

4

I’ve read through this, done as they asked, and my footer is still not sticking to the bottom of the page, just sticking to bottom of the visible screen.

5

Well, I’m not too sure now. donboe’s code should have worked for you. The only thing I can think of is that all those content boxes with position:absolute; could be screwing up your column-divs’ heights.

That being said, I use Ryan Fiat’s Sticky Footer with my sites. If you can integrate it into your code, it should work. Then again, it’s the same method as donboe’s. :-/


<html>
 <head>

  <style type="text/css">
   * {
	margin: 0;
   }
   html, body {
	height: 100%;
   }
   .wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
   }
   .footer, .push {
	height: 142px; /* .push must be the same height as .footer */
   }
  </style>

 </head>
 
 <body>

  <div class="wrapper">
     <p>Your website content here.</p>
     <div class="push"></div>
  </div>
  
  <div class="footer">
      <p>Your footer content here</p>
  </div>

 </body>
</html>

Like I said, if there’s a way for you to recreate that theme without the need for all the absolutely positioned content boxes, I think it may fix your issue.

6

hi, thanks for the quick reply. I made the changes you posted, but now my footer appears at the bottom of the screen, under the content. What i need my footer to do is be at the bottom of my page with a little gap between the content and footer. If i zoom out i see the footer sticks to the bottom of the screen, but it is the page i would like it to stick too.

CSS here
HTML here
Index page here

7

There are a few things you need to change/add in your CSS. First off start your CSS like this:


html, body {
    height: 100&#37;; margin: 0; padding: 0;
}
html {
    overflow-y: scroll;
    overflow-x: auto;
}

You have to apply a min-height and a negative bottom margin to your wrapper and a height for older IE versions. This negative bottom margin should be the same as the height of your footer . I used 150px:


#wrapper {
	width: 960px; min-height: 100%; margin: 0 auto -150px; text-align: left; overflow: auto;
}
/* IE reads height as min-height */
* html#wrapper {
    height: 100%	
}

remove the clear from your footer and add an extra class to clear, with the same height as the footer and the negative bottom-margin of your wrapper div:


#chunkyfooter {
    height: 150px; background: #eee; overflow: hidden; padding-top: 10px;
}

.push-footer {
    height: 150px; clear: both;
}

and then your html should look like this:


<div id="wrapper">
<div id="header">

</div>

<!-- The rest of your content -->

<div class="push-footer"></div>
</div><!-- End of your wrapper -->
<div id="chunkyfooter">

</div>

This should do the trick.

8

Try reading the CSS forum’s sticky on Sticky Footer. Should get you what you need.