Search code examples
jqueryhtmlcssfootersticky-footer

Sticky Footer pushes Content Below Page

i tried to setup the sticky footer from here

Here is the jsfiddle http://jsfiddle.net/pbhE8/

And my site: http://22twenty.com/Test

As you can see the footer is being pushed beyond the base of the content.

i can't post anymore links but i'm sure you can get the css, and anything else you might need from the site posted.

Hope someone can help

Denver

Solution

  • I assume that what you would like to do is have that footer div stick to the bottom of the page but not overlap any content that you have in the middle of the page. I have not used 'sticky footer' before but i have done this on a few sites, this is what i do (actually came from a question i asked on here a couple of weeks ago.

    create a <div> that is around the entire sites contents. Set the css of this div to:

    #wrapper {
min-height: 100%;
width: 100%;
position: absolute;
}

    The create a content div for the middle of the page where the main content of your site will go with css:

    #maincontent {
width: 'some width';
height: 'some height';
margin-bottom: 'the height of the footer'
overflow: auto;
}

    then have your footer div embedded within a 'bottom' div with css:

    #bottom {
width: 100%;
position: absolute;
bottom: 0;
}

    Then as long as the margin of the main content div is the same height as your footer div they will not overlap but the footer will be inside the 'bottom' div which is 'stuck' to the bottom of the browser window.

    Hope this helps let me know if you have any questions or need further help.