The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Stick Footer Variation

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #31840

    I’ve noticed a nice variation on the “stick” footer at the iStock photo website.

    I like how the content scrolls behind the footer. It’s a nice touch.

    Also see and

    Is there anyone with an analysis/opinion of the implementation? It looks like all CSS to me, but I’m not an expert.


    If you’re talking about the black toolbar that is fixed to the screen, that’s not actually the footer.

    As for implimentation, it’s just a div placed last in the body element with a fixed position (scrolls with the browser) and has 25px left and right values to make it span across the screen regardless of resolution (and makes it appear centered).



    #toolbar {
    position: fixed; /* makes it stay with the browser while scrolling. */
    z-index: 1000; /* keeps it above all other content. */
    bottom: 0; /* obviously makes sure it sticks to the bottom */
    left: 25px; /* same left and right values which causes it to stay "centered" */
    right: 25px;
    background: black;
    height: 30px;


    Is it possible to specify a width and keep centered without left and right value? Like using margin: 0 auto; or does the fixed position and bottom: 0 disallow that?


    Off the top of my head, using positions (fixed / absolute) prevents your margin: 0 auto;

    You may be able to do left: auto; right: auto; or left: 0; right: 0; I will have another look when I get back home.

    EIther way someone will correct it.

    It’s been a long time since I have needed to center in this way.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.