What’s happening though, is that the footer is being pushed down when the Height:100% is given to my html and body.
Ok, that’s good , but if you look below the footer, there is a gap between the browser and the bottom of the footer. It’s also being pushed down below the viewing area even though there is no content pushing it down. I obviously want the footer to be flush with the bottom of the browser. What is causing that?
For some reason, adding the negative margin to the “container” div and adding the extra “.push” class is not effecting anything. ( I made sure that .push has the same height as the footer.)
I even tried just using absolute positioning to the bottom for the footer, but of course that cause all kinds of problems between different resolutions.
Hey, I took a look at the site with Google Chrome inspector (Firebug would work if you want to look).
Your problem is that the div “footernav” is taller than the footer.
Changing the height of footernav fixes this problem