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.

Personally, I found How to keep footers at the bottom of the page by Matthew James Taylor definitely noteworthy. Matthew describes a two step solution which I am going to adapt here for the Genesis Sample child theme.

This solution should work with all HTML5 Genesis child themes.

And it also works with the Dynamik Website Builder, that is when you have checked the option Genesis HTML5 Markup within the Dynamik Settings.

What we need to get this to work is:

• the proper HTML
• the required CSS

Necessary HTML

The following HTML focuses on the div tags needed to keep the footer at the bottom of the page:

<div id="container"> 
   <div id="header"></div> 
   <div id="body"></div> 
   <div id="footer"></div> 
</div> 

When building a web page from scratch, you can of course follow the naming convention above.

However, when you use for example the Genesis Sample theme as a starter theme, you better go with the flow. And fortunately, that is quite easy.

Here is the same HTML, this time translated to the proper selectors of a HTML5 Genesis child theme:

<div class="site-container">
   <div class="site-header"></div>
   <div class="site-inner"></div>
   <div class="site-footer"></div>
</div>

Since all these classes are already included in HTML5 Genesis child themes, there is nothing further for you to do. You are already done with phase #1.

Let us continue with the CSS.

Required CSS

We do not need all CSS rules from Matthew’s example. The values of some properties are already included with your Genesis child theme.

We can strip out the background color and the padding of the header div, as well as the background color of the footer.

The stripping of the CSS leaves us with a site-header rule without declarations. The reason I have included this rule anyway, is for the sake of completeness.

What we do need, it the following CSS:

html,
body {
   margin: 0;
   padding: 0;
   height: 100%;
}

.site-container {
   min-height: 100%;
   position: relative;
}

.site-header {
}

.site-inner {
   padding-bottom: 65px;
}

.site-footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 65px;  
}

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.