Switch div from fixed to absolute at bottom of browser

Question

Im trying to add a footer at the bottom of this content that doesn\'t overlay the content but moves it up.

The only way I can see it working would be something like,

Answer 1

I'm not 100% sure what you want, but if you remove the position: absolute and the bottom: 0 from the footer, and put a div with class='clearboth' above the footer, it seems to do what you need.

CSS

.clearboth {
    clear: both;
}

---

This is a drawing of what I see on your fiddle;

Do you want the red and the blue to always be touching the black?

I don't see the red overlying the black