html - Have Some problems with my footer

Question

I am working on a simple html webpage that contained a footer But the footer does not work correctly !

I want the footer be at the bottom of the page but ... !

and this is the problem :

here is a demo of my webpage ( sorry for the language ;) ) :http://gooloop.ir/dl/site/temp.html

Answer 1

Add overflow:hidden to .content.

The content was collapsing upon itself as it didn't have any defined dimensions, and thus the footer was placed over it.

.content {
    width: 962px;
    margin: 0 auto;
    padding: 10px;
    border-radius: 10px;
    margin-top: 20px;
    overflow: hidden;
}

It will work. Tested in the dev tool.