Footer not sticking to bottom of page

while using Google Chrome on this page: http://wilwaldon.com/solage/special_offers.html the footer is right under the first special offer. It seems to work fine in FF for some reason.

On other pages it's at the bottom. For example (http://wilwaldon.com/solage/resort.html).

This happens even though the footer html is at the same place on both pages.

I found the culprit, but can't seem to figure out how to fix it without messing up the majority of the site in the process.

Here's the pastebin for the CSS of the culprit: http://pastebin.com/vmBL8nUc

Here's the pastebin for the CSS for the Footer: http://pastebin.com/5rmDnSDT

Here's the pastebin of the html file: http://pastebin.com/fvV5wdjE

Any help would be greatly appreciated.

There are a couple of methods you could use to make the footer stick to the bottom, the one I prefer to use is the following:

Instead of sticking the footer after the content div, why not work from the "Bottom up". This should be more cross browser friendly,

Make sure you have a wrapper div, this contains all the content.

Give your wrapper div the following css properties:

height:auto; 
position:relative;

Be sure that your content div and footer div are inside your wrapper div.

Use css to specify the height of your content div (From looking at your code, you've done this already)

Finally, give your footer div these properties:

clear:both;
bottom:0px;
position:absolute;

Now when you specify the height of this footer, it will go from the bottom upwards.

So, as you pointed out, the culprit is that the container, .contenttop has a height set, it's causing the footer to run up on the "bottom" of that container. The issue is that the container is showing it's overflow, thus making it appear that the footer is in the wrong place.

You have two options.

1) I would remove the height property of .contenttop. This allows the natural flow of content as you would expect. On the special_offers.html page, it looks like that fixes the issue.

2) If, for some reason, you cannot remove the height, you'll have to employ some JavaScript to dynamically set the height of the .contenttop container. If this is the route you need to go, I would probably consider rethinking your front-end code.

Hope that helps!

When you say 'majority of the site', what specifically is happening? It may will be quicker to remove that height and fix the problems that creates than trying to fix this problem.

Alternatively, are you able to override that height on other pages if necessary?