Tip: Sticky footers

A footer sits at the bottom of a page ready to be read. We show you how to make sure it sticks to the bottom of the browser window.

A STICKY FOOTER effectively sticks to the bottom of a page/browser window. When the browser window is resized the footer goes with it. The method we are going to demonstrate sticks to the bottom of the page until it comes into contact with page content. Then the scrollbars are called into action and it’s back to scrolling to get to the footer. The technique is very much based on the Ryan Fait example found at http://ryanfait.com/
resources/footer-stick-to-bottom-of-page/.
First create a div tag called #wrapper (Insert>Layout>Objects>Div Tag). Place the next div tag called #push in-between the opening and closing tags of #wrapper. Now place the third div tag called #footer directly
underneath #wrapper. Now add the following In the associated CSS file:

* { margin: 0;}
html, body {height: 100%;}
Now add the following CSS to #wrapper:
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -120px;
}

The important element to note here is -120px. This is effectively the size of the footer. This can be any measurement, but it must be the same in the rest of the CSS code. Now add height: 120px; to #push and #footer. Next add a div tag to hold content , before #push, and style up #footer to finish. An alternative solution can be found at http://www.cssstickyfooter.com. Here the author uses a class instead of a push div tag. Some might say that this is a more semantic and standards-friendly alternative, but the outcome is effectively the same.