I have use a sticky footer solution which work somehow but I am not sure what is source is new problem that seem to arise which is the footer is overlapping the content as you shrink the window of browser and the mystery gap that is pushing the edge of footer outside of browser range with big white gap between content and footer.

I hope someone can help me with this issue and may highlight the mistakes i made?

Sticky Footer solution came from http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

  • Looks like you have something else messed up too: your sticky footer doesn't work on Safari 4/Mac, while his does. I see a white gap no matter how big/small the window is above the footer/below the content. Just an FYI. Cameron Conner over 8 years ago
  • the problem with Safari4/mac seems to be the em in the margin property. I switched that to pixels, (260px) and it at least sits on the bottom. As for your main issue, it seems to be something else in your css code. I'd go back and check every div, by removing them one at a time. also, add !important on .wrapper { height:auto; }. Good luck :) Cameron Conner over 8 years ago

2 answers

This was chosen as the best answer
  1. Add "float: left;" to the div with the class "container"
  2. Add "clear: both;" to div with the class "push" and to the div with the class "footer"

Hope that helps!

Answered over 8 years ago by Nick Pettit

problem is solved - thank you for quick response - here a cookie for you =)

Answered over 8 years ago by chris keeley
  • Thanks! I love cookies. :D Nick Pettit over 8 years ago