why is the sticky footer overlapping top content on resize

Question

Here is the html

<div id = "wrapper" class = "selfclear">
    <div id = "contentDiv" class = "selfclear"> 
    </div> <!-- End contentDiv --> 
</div> 

<div id = "footerDiv" class = "selfclear"> 
</div> <!-- End footerDiv -->

Here is the css:

    *
 {
    margin: 0; 
    padding: 0; 
    border: 0;
}  

.selfclear:after 
{
    content:                ".";  
    float:                  left;
    display:                block;
    height:                 0;  
    clear:                  both;   
    visibility:             hidden;
}  

html, body
{
    height:                 100%; 
}  

#wrapper   
{ 
    width:                  100%;
    min-height:             100%; 
    background:             url( "../images/landing_page_bg.png" );
}  

#contentDiv
{  
    padding-bottom:         340px;
    overflow:               auto;
    border:                 1px solid green;
    width:                  1000px;
    margin-left:            auto;
    margin-right:           auto; 
    height:                 500px; 
} 

#footerDiv
{
    position:               relative;
    width:                  99.9%;
    clear:                  both;     
    height:                 340px;
    margin-top:             -340px;
    border:                 1px solid green;
    background:             url( "../images/landing_page_footer.png" )no-repeat;
    background-size:        100%; 
}

basically when zooming in/out in the browser the sticky footer overlaps the top content, why, and how do stop it from doing that, thanks.

Here is the code in a working environment.

http://jsfiddle.net/9X753/

Answer 1

You can't say your footer is "sticky" in that case. I sugger you reading this tutorial instead: http://www.alistapart.com/articles/footers/

I'm using this method and it works perfectly.