Grow your CSS skills. Land your dream job.

Centered Fixed Footer

  • # March 7, 2013 at 8:59 pm

    I would like to have a fixed footer that stays in the centered horizontally no matter what size the viewport is. Could someone give me some help on how to do this? I’ve tried several solutions, but I can’t figure out how to get what I want. I want the footer to always be at the bottom of the viewport, but centered. The footer will have a Facebook like button, copyright information, and, possibly, a search bar. I’ve been making the width of the body of my webpages 1000px.

    # March 7, 2013 at 9:11 pm

    This gives you several methods to work with depending on your setup. I believe what you are looking for is a “sticky footer.” This is the method I am using here and here. It works exactly how I want it to. You can zoom in and out and the footer will always stay at the bottom. I hope that helps.

    # March 8, 2013 at 2:05 am

    http://codepen.io/Merri/pen/DdFlp

    The important part is quite short:

    bottom: 0;
    left: 50%;
    margin-left: -500px; /* half of element’s width */
    position: fixed;
    width: 1000px;

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".