Putting your foot down – keep the footer at the bottom of the page

While setting up a new website, have you ever experienced that the page footer is floating somewhere halfway the page?

Usually this resolves itself as soon as you start publishing content. But when you also publish smaller posts, or use post formats and publish for example links and quotes, you might encounter those mid-air footers regularly.

Although, I have noticed this phenomena before, I never really cared about it. After all, it was only a temporary problem. Until now.

Currently, I am in the process of setting up a personal blog, where I can publish about topics that do not really belong on any of my other blogs.

And as mentioned, yet again I was faced with the mid-air footer. However, this time, I wanted to take the bull by the horns and sort this out for once and for all.

Instead toying with 100% heights myself, I thought I could save some time by consulting Google first. Although Google did not reply with a straight answer, I did get an extensive list with links to just as many resources. After visiting a number of those websites, I found several solutions to the problem that might work.

What you probably have to adjust for your specific situation is the height of the site-footer class, and consequently the padding-bottom of the site-inner class. The latter needs to be equal to the height of the footer.

That is! And here is the proof:

Ready for a test-drive? Just copy and paste the CSS above in the style.css of your Genesis child theme. When you use Dynamik, copy the CSS into the Custom CSS area.

Disclosure: This post may contain affiliate links. When you follow an affiliate link and purchase an item on the website regarding, Wilwebs may receive a compensation -- but rest assured, not at your expense ;-) .