Question

I know everyone has problems with their footers, and I have traversed many with no success in practice.

The height of my footer is 121px, the padding-bottom of the main content is 121px.

The elements are positioned absolutely, thus taking them out of the natural flow of the document. Could this be where the problem is?

The CSS is now too big to paste somewhere (unless you have a free 5 mins in which case its at I have stripped it of content and info for the js fiddle)

Thanks.

Clarification: essentially it’s a ‘sticky footer’ so if the content doesnt fill the page the footer sticks to the bottom, then it will scroll down with content. However, the content goes underneath it and stays where it first was on the page.

Answer 1

i dont know what you exactly want to know.. but if you just want to know how your footer is on the bottom of your page, even if the page got scrollbars, you just have to give your css id bottomwrap the position fixed

    #bottomwrap {
      position: fixed;
    }