页脚重叠中间div？

Question

I have this php file where I have 4 divs.

• Header
• Middle
• Footer
• Right Navigation

Now I also have a login system and when I am not logged in my middle div and footer div looks the way I want it to be. Like so:

Now when I log in, it looks like this:

As you can see, the page number at the right are being overlapped a little when I'm logged in and the border is gone. Which is probably also because of the overlapping.

Now I have made a jsfiddle but it doesn't look like it looks like when I run the php script though. I've changed the colors to make sure you see the divs although the result of the jsfiddle isn't right. The code on the other hand is how it is. http://jsfiddle.net/FcBeA/4/

Though I do think the most important thing to look at is the footer css:

.footer{
     text-align:center;
    clear:both;
    position: absolute;
    margin-left:10%;
    height:15%;
    width:80%;
    background-color:white;
    top:100%;
    /*border-radius:12px;*/
}

What is going wrong?

Answer 1

Add z-index:-999; to your footer:

.footer{
     text-align:center;
    clear:both;
    position: absolute;
    margin-left:10%;
    height:15%;
    width:80%;
    background-color:white;
    top:100%;
    z-index:-999;
    /*border-radius:12px;*/
}