footer locks in position - html

Question

I have modified App footer to stay at the bottom of the page if the page content is little.
So it wouldn't left free space afterwards. It works just great.
But now I discovered that in pages where content is much more than it fits in current window, footer has stayed at the same place, but the content expands in background of footer.
It looks like
this
My CSS for footer.
#footerCntr {
position:absolute;
bottom:0;
width:100%;
overflow: hidden;
background:#e7e7e7;
border-top:3px solid #b7b7b7;
margin:11px 0px 0px 0px;
}
.footerBox{
width:780px;
margin: 0px auto;
padding:11px 0px 14px 0px;
}
.footerBoxLeft{
float:left;
width:176px;
padding:8px 0px 9px 26px;
background:url(bordery.gif) right top repeat-y;
}
.footerBoxLeft img{
float:left;
margin:0px 0px 0px 2px;
}
.footerBoxRight{
float:right;
width:575px;
padding:0px 0px 10px 0px;
}
.footerlink ul{
padding:7px 0px 5px 0px;
}
.footerlink ul li{
list-style:none;
padding:0px 10px 0px 10px;
display:inline;
background:url(devider.gif) 0px 3px no-repeat;
}
.footerlink ul li a{
font:10px Tahoma , Arial, Helvetica, sans-serif;
color:#535353;
text-decoration:none;
padding:0px 0px 0px 0px;
}
.footerlink ul li a:hover{
text-decoration:underline;
}
.copyright{
color:#535353; padding:0px 0px 0px 10px;
}
.copyright a{
font:10px Tahoma , Arial, Helvetica, sans-serif;
color:#535353;
text-decoration:none;
padding:5px 0px 0px 0px;
}
.copyright a:hover{
text-decoration:underline;
}
Link to my app problem.
It could be problem with content CSS formating ?
here