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

Your question is a little vague, but if I understand correctly I think what you are looking for is position:relative.

position: relative;
bottom: 10px;

what this does is it adds a specified amount of space (10px) in between the element and the next relative parent element. Good Luck!

Answer 2

#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;
}