Okay! After some hours I saw what's wrong... I've put the footer div into wrapper div and everything went normal!
So this is what I did to achieve it basically;
<div class="wrapper">
//some other content
<div class=footer>
//footer content
</div>
</div>
and I've put backoverflow:hidden;
to wrapper which I had removed to test what is wrong. You can see what other css properties I've used up here at the question.
Hope these can be useful to someone and thanks for everyone who helped.