Sticky footer almost works

Question

I used this blog post (see comments - I can't post more than two links because I am new to SO) to put a sticky (but not fixed) footer on my website.

It had been working everywhere on the website, until I used this blog post (see comments) to display my images on hover. Now the footer floats quite aways above the bottom of the page, but only on the pages with the image hover styles. Here is a broken page, and here is one where it is working.

I am guessing it has to do with the styles for the ul.enlarge span because when I remove those in the Chrome dev tools, the footer pops back into place, although it causes the enlarged hover images to all appear on the page (obviously not what I want).

Is there a way to both get my footer to stay on the bottom of the page (even when the content doesn't reach all the way to the bottom) and still enlarge my images when I hover???? What is causing that giant blank gap at the bottom of the page??

Answer 1

It's because full-sized gallery images on the broken page (hidden far left from the view window) are taking some space, you can fix the footer by changing position of the element containing those images from

ul.enlarge span {
    left: -9999px;
    position: absolute;
}

to

ul.enlarge span {
    left: -9999px;
    position: fixed;
}

So those images wont interfere with the rest of the page while 'hidden' as position: fixed; is positioning elements relative to the browser window

You can also check how and why it's broken via changing left value to 0 so u'll know what is happening in the background

edit: As suggested in the comments, you could also fix the page by fixing gallery styling like that

ul.enlarge span {
    display: none;
}
ul.enlarge li:hover span {
    display: block;
    position: absolute;
    left: -20px;
    top: -300px;
}

so it wont break your footer in the future