Search code examples
htmlcssfootersticky-footer

Footer doesnt go all the way to the bottom

My footer doesnt go all the way to the bottom. I have put my code in a js fiddle for people to have a look at:

http://jsfiddle.net/q2pd5/

My problem is better viewed on the actual page: http://dev.madhousecreative.co.uk/ or on the full screen result of the jsfiddle its obvious also.

As It is clear to see, underneath the footer there is a white gap, and I dont know why it is appearing.

I have alot of floats in here but I have tried clearing them where necessary.

Have also tried to sticky footer as suggested in some other questions answers but that doesn't work either.

As far as I am aware it is on all browsers

Solution

  • Just add

    overflow: hidden

    to #footer in your css. This is a little trick that often gets overlooked. Basically overflow: hidden allows your div to size vertically based on it's contents.