Support » Themes and Templates » Problems with sticky footer

  • I’m trying to get my footer to stick to the bottom of my page. I’ve followed loads of different tutorials (most of them very similar) on sticky footers, but none of them have worked for me. For some reason the footer positions itself at the bottom of the browser window instead of the actual page…

    This is the layout of divs in my HTML:

    <div id="wrapper">
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
    </div>

    This is my CSS:

    html, body {
    height: 100%;
    
    #wrapper {
    min-height: 100%;
    position: relative;
    }
    
    #content {
    position: absolute;
    padding-bottom: 300px; (same as footer height)
    }
    
    #footer {
    width: 100%;
    height: 300px;
    position: absolute;
    bottom: 0px;
    }
Viewing 1 replies (of 1 total)
  • Could you post a link to your site?

    Could you post another link to a site or tutorial with the footer you’re trying to get?

Viewing 1 replies (of 1 total)
  • The topic ‘Problems with sticky footer’ is closed to new replies.