Search code examples
cssfooterfixedsticky-footeroverlapping

Problems with Sticky Footer

I've been trying various techniques to implement Ryan Fait's Sticky Footer technique and none seem to work. My footer content always overlaps my main content when the browser is vertically challenged. It could be because I have many fixed positioned DIVs nested within the footer. When I wrap these DIVs around a parent DIV (#footer), this parent DIV doesn't seem to even appear, nor can I apply styles to it to control its position (and the content within).

HTML: 

<body>
<div class="wrapper">
<div id="content"> Juicy stuff goes here</div>
<div class="push"></div>
<div class="footer">

     <div id="print_blank"></div>
     <div id="logo"></div>
     <div id="nav_bar"></div>
     <div id="footerarea">Contains other Text</div> 

</div><!-- Footer Area -->
</body>

CSS:

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -240px;
}
.footer, .push {
    height: 240px;
}
#print_blank {
    padding-top: 0px;
    bottom: 160px;
    position: fixed;
    z-index: 11000;
    width: 100% !important;
    text-align: center;
    min-width: 980px;
}
#logo {
    width: 180px;
    padding-top: 5px;
    bottom: 86px;
    position: fixed;
    z-index: 9999999;
    left: 45px;
}
#nav_bar {
    padding-top: 0px;
    bottom: 77px;
    position: fixed;
    z-index: 99999;
    width: 100% !important;
    text-align: center;
    min-width: 980px;
}
#footerarea {
    bottom: 0px;
    position: fixed;
    width: 100%;
    padding-top: 20px;
    background-color: #F16924;
    height: auto;
    text-align: justify;
    min-width: 960px;
    z-index: 999999;
}

Thanks!

Solution

  • This is a better way to do it:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}

* html #outer {/* ie6 and under only*/
    height:100%;
}

.wrapper {
    min-height: 100%;
    margin: -240px auto 0;
}

.content {padding-top: 240px;}

.footer {
    height: 240px; background: #F16924;
}

</style>

</head>
<body>

<div class="wrapper">
    <div class="content">Juicy stuff goes here</div>
    <div class="push"></div>
<!-- end wrapper --></div>
<div class="footer"></div>

</body>
</html>

    The limitation of sticky footers is that the footer must stay at a fixed height. But the elements you have in there shouldn't affect the layout as long as you are careful.

    EDIT: Here's a revised template with the footer elements included:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}

* html #outer {/* ie6 and under only*/
    height:100%;
}

.wrapper {
    min-height: 100%;
    margin: -240px auto 0;
}

.content {padding-top: 240px;}

.footer {
    height: 240px; background: #F16924; position: relative;
}

#print_blank {
    padding-top: 0px;
    bottom: 160px;
    position: absolute;;
    z-index: 11000;
    width: 100% !important;
    text-align: center;
    min-width: 980px;
}
#logo {
    width: 180px;
    padding-top: 5px;
    bottom: 86px;
    position: absolute;;
    z-index: 9999999;
    left: 45px;
}
#nav_bar {
    padding-top: 0px;
    bottom: 77px;
    position: absolute;;
    z-index: 99999;
    width: 100% !important;
    text-align: center;
    min-width: 980px;
}
#footerarea {
    bottom: 0px;
    position: absolute;
    width: 100%;
    padding-top: 20px;
    background-color: #F16924;
    height: auto;
    text-align: justify;
    min-width: 960px;
    z-index: 999999;
}

</style>

</head>
<body>

<div class="wrapper">
    <div class="content">Juicy stuff goes here</div>
    <div class="push"></div>
<!-- end wrapper --></div>
<div class="footer">
    <div id="print_blank"></div>
    <div id="logo"></div>
    <div id="nav_bar"></div>
    <div id="footerarea">Contains other Text</div>

</div>

</body>
</html>