How to keep footer from moving out of the way of elements above when the window gets height decreases

Question

I'm trying to get my footer to stop moving out of the way of other elements with the height of the browser decreases. Instead I'd just like it to stay put and be able to scroll down.

Here is a link to the page it is happening on:

http://fine-grain-2.myshopify.com/cart

Here is the CSS for my footer:

footer {
    margin: 0 auto;
    padding: 0 0 1em;
    position: relative;
    text-align: center;
}

Here is an example of what is happening:

GOOD

BAD

I've tried everything I know and looked at other websites with firebug that are doing this. Any help would be greatly appreciated.

Answer 1

All you need to do is add the following css:

clear:both;