The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

[resolved] [2011] Footer always at the bottom of the screen (3 posts)

  1. domdomdom
    Posted 2 years ago #


    Website I'm working on is

    I was researching how to make a footer always at the bottom of the screen, no matter what resolution of the screen and no matter how much content there is.

    Somewhere online I found this code:

    #body {
       padding-bottom: 2em;   /* Height of the footer */
    #colophon, #site-generator {
       position: absolute;
       height: 2em;   /* Height of the footer */
       background: url(http://51stokescroft.com.gridhosted.co.uk/wp-content/uploads/2013/10/footer-bg.png);

    Which worked great initially, and then I saw that sometimes it floats up to the middle of the page, and it did so when I checked the website on smartphone.. If it floats up to the middle of the page, I found out that removing position:absolute fixes it for a bit, after a while the footer again goes back to the middle of the page sometimes. I then add position:absolute back and it works again for a bit.. But don't know what's the problem with it in the first place?

    Also another problem with this footer I have is that if i decrease the size of the screen, it always stays the same size and ends up being either on top or underneath the other items of the page (e.g. menu).. How could I fix it?

    Will appreciate the help massively!

    Thanks a lot,

  2. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

  3. domdomdom
    Posted 2 years ago #

    I reposted it to how-to's and troubleshooting, hope that's okay!

    That's the page that I got the code from- which I was ecstatic about a couple of days ago!- but still got problems with it as mentioned above. But I'll repost the post now.. sorry! :)

Topic Closed

This topic has been closed to new replies.

About this Topic