Sticky footer acting weird

Question

I have made a sticky footer for my website, but it doesnt act like i want i to. I want it to be totally at the bottom, always depending on the length of the content. Instead it is always present on screen, as it is. Can anyone help me ?

This site

footer css:

#footer{
position: fixed;
bottom: 0;
z-index: 1;
width: 100%;
height: 50px;
clear: both;
background-image: url("../images/footer_pattern.png");

}

Answer 1

#footer{
width: 100%;
height: 50px;
clear: both;
background-image: url("../images/footer_pattern.png");
display: block;
margin-top: 0px;
//if contains children add overflow:hidden;
}