How to make the sticky footer not overlap other divs

Merged with When zooming in, how come the divs overlap each other? [duplicate]. 开发者_如何学运维

I'm having this issue where the sticky footer, when zooming in a lot in the browser, overlaps the other divs on the page. Is there anyway to not make it overlap other divs and still have it function like a sticky footer?

Here is the HTML:

<div id = "mainWrapperDiv"> 
    <div id = "mainDiv">
        <div class = "test1div"> testing </div> 
    </div>
   </div>
<div id = "footerDiv">
</div>

here is the css:

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

body, html
{
    height:             100%
}

div
{
    border:             1px solid;
    overflow:           hidden;
} 

#mainWrapperDiv 
{
    min-height:         100%;  
    height:             100%; 
    margin-bottom:      -200px;
}  

#mainDiv  
{

    border:             1px solid;
    margin:             0px auto 0px auto; 
    width:              1000px;
    background:         lightgreen;  
    overflow:           hidden;
}

#mainDiv div.test1div
{ 
    width:              20em;
    height:             20em;
    float:              left;
} 

#mainDiv:after
{
    content:            ".";
    height:             0px;
    display:            block;
    clear:              both;
    visibility:         visible;
}

#footerDiv 
{
    height:             200px;
    width:              100%;
    clear:              both;
    background:         lightblue;
    overflow:           hidden;
}