Как сделать так, чтобы липкий нижний колонтитул не перекрывал другие элементы div

Question

У меня возникла проблема, когда липкий нижний колонтитул при большом увеличении в браузере перекрывает другие элементы на странице. В любом случае, чтобы он не перекрывал другие элементы div и все же работал как липкий нижний колонтитул?

Вот HTML-код:

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

вот 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;
}