James Barbour's Avatar

James Barbour

17 Apr, 2012 02:15 AM


I see that there is an open thread about positioning the footer so it is always at the bottom, but when I use the code you've provided,it seems to be made specifically for the previous persons page. Can you have a look at my page and let me know how I might get this.

I just want to eliminate all the white bit below my footer and end the page with the footer so it can't be extended more and more with blank space.

  1. 1 Posted by Briehan Lombaar... on 17 Apr, 2012 07:51 AM

    Briehan Lombaard's Avatar

    Hi James,

    Adding this CSS to the "Header code" field of your site should work:

    #main {
        margin-bottom: 140px;
    #footer {
        background-color: white;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;

    The margin on the #main element above pushes down the footer so that it never overlaps with any content. Then we add position: fixed to the footer to make it stay in place along with bottom: 0 to put it at the bottom of the page. We also add a white background colour so nothing "shows through" from behind and finally z-index: 9999 so that elements like flash or slideshows don't float over the footer.

    Remember that this will probably only work with how your site is currently configured. You might need to adjust the above if you make any changes to your site.

  2. Briehan Lombaard closed this discussion on 17 Apr, 2012 07:51 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac