Home/ Questions/Q 7982155
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T10:35:37+00:00

I am trying to implement a sticky footer for a site i’m working on

  • 0

I am trying to implement a sticky footer for a site i’m working on (see here). I attempted to follow the guide on CSS Sticky Footer – specifically, this implementation.

This is working perfectly in Firefox (13) but in Chrome (21) and IE (9) the #footer is pushed further down the page adding a vertical scroll bar. I assume this is something to do with the use of padding and margins inside my #wrapper – however I am unable to put my finger specifically on the issue. I would really appreciate some help.

The site structure:

<html>
    <div id="wrapper">
        <div id="header"></div>
        <div id="menu"></div>
        <div id="page"></div>
    </div>
    <div id="footer"></div>
</html>

and the relevant CSS:

#wrapper {
    min-height: 100%;
    width: 100%;
}
#header { 
background: url("/images/backgrounds/transparent.png") transparent;
    border-bottom: 2px solid #EF7C31;
    height: 44px;
    margin: 0 auto 20px;
    width: 960px;
}
#menu { 
background:#FFFFFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    height: 60px;
    margin: 0 auto 20px;
    padding: 10px 20px;
    width: 920px;
}
#page {
background: #FFFFFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin: 0 auto 30px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 20px 30px;
    width: 920px
}
#footer {
background: url("/images/backgrounds/transparent.png") transparent;
    border-top: 2px solid #EF7C31;
    clear: both;
    height: 116px;
    margin-top: -158px;
    overflow: auto;
    padding: 20px;
    position: relative;
}

Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add this line to the wrapper:

    overflow: hidden;

    So you would have:

    #wrapper {
    min-height: 100%;
    width: 100%;
    overflow: hidden;
}

    Alternatively add a push div just before the footer. This will push the footer down.

    • 0