How do I make sure that my footer shows all the way at end of the page rather than in the middle?

Question

Here\'s my footer css:

 .footer {
      background-color: #CACACA;
      font-size: 20px;
      height: 50px;
      padding-top: 10px;
      position: absol         


        

Answer 1

like so

  


    
    


    

        

            
HTML Ipsum Presents
        
        

            
© My Website 2013. All Rights Reserved!
        

    

see we have the footer in the wrapper and the footer is absolute to the bottom and left of the wrapper then we just add the height of the footer to the wrapper bottom padding and some default height on the wrapper and body and that's sorted, take a look on jsfiddle here - http://jsfiddle.net/eTwJh/2/ and here is one with no content - http://jsfiddle.net/eTwJh/3/