WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
How to keep the footer always at the bottom of the page? (3 posts)

  1. domdomdom
    Member
    Posted 6 months ago #

    Hello!

    Website I'm working on is
    http://51stokescroft.com.gridhosted.co.uk/

    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.

    I found this code below (source:http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page) :

    #body {
       padding:10px;
       padding-bottom: 2em;   /* Height of the footer */
    }
    #colophon, #site-generator {
       position: absolute;
       bottom:0;
       width:100%;
       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,
    Domi

  2. lettergrade
    Member
    Posted 6 months ago #

    It's tricky, definitely. And your height is hard-specified here, so of course it's staying the same size. Have you tried looking at using media queries to change behaviour depending on the size of the screen? Here is a good intro:
    How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

  3. domdomdom
    Member
    Posted 6 months ago #

    Thanks lettergrade, I'll look into media queries! :)

Reply

You must log in to post.

About this Theme

About this Topic