Forums

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

Home Forums CSS Sticky Footer Method

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #42534
    mintertweed
    Participant

    I am using a sticky footer method and it works just fine on my front page, but not so much on any of the other pages. Other than the front page, the only other page I have a design for at the moment is my contact page. It is all using the same stylesheet, so I am rather clueless as to why it is not working. The method I am using, uses this code for the main-column:

    #main-column {
    padding-bottom: 70px; /* Must be same height as the footer. */
    }

    And this code for the footer:

    #footer {
    margin-top: -70px; /* Negative value of footer height. */
    height: 70px;
    }

    What am I missing? I am sure it is something terribly simple as usual. Thank you in advance!

    Edit: I believe this is the site I originally got the concept from about a year ago.

    #123602
    noahgelman
    Participant

    There is more css in the example that you linked to than you have shown above. Do you have a link to the site?

    #123610
    Senff
    Participant

    I can’t really see where it went wrong originally because you gave the footer an absolute position, and like you said that’s messing things up a bit.

    Having a footer and then have a div id="footer" within it, is a bit silly IMO. I think you were fine with the original code, but you might want to check if #main-column is cleared? Use a clearfix on that one (try giving it overflow:hidden; and see if that works.

    #123619
    yeeyang
    Participant

    A little confused on what ‘look’ you’re trying to go for but two things I could suggest.

    If you’re looking to make sure that the footer is always at the bottom of your page, then you already have the footer absolutely positioned to the bottom. Just need to give the footer a positioning context of it’s parent. Add:

    .page-wrap { position: relative }

    You can take off the `min-height` as well from your `.page-wrap` as well and put a `overflow:hidden;` on your `#main-column` to allow your content to flow properly.

    If you’re looking for a real sticky footer, you can just do a `position: fixed` to your footer and put a background color on `footer` so content flows behind it. I would just remember to put some padding at the bottom of your `.page-wrap` so that your footer has a place to live.

    #123634
    Paulie_D
    Member

    If you are using the Sticky Footer method I am thinking of then the footer element should be OUTSIDE of the #pagewrap. then it will naturally come after any other element and the 100% heights and margins/padding etc. will do the rest.

    http://codepen.io/Paulie-D/pen/aFpCu

    #123669
    Senff
    Participant

    I believe that on the base level, the page should have TWO elements. One is the footer, and one is all the rest (let’s just call it the “main block”). This main block needs to have a min-height of 100%, so that it pushes the footer all the way to the bottom of the screen.

    However, you have a wrapper, and then three elements within that (including the footer, still!), so the basic structure won’t work there.

    Here’s what I would suggest: first, move the footer OUT of the wrapper. I know you said you moved it out of it, but I still see it in there.
    Then, give the #wrapper auto-height and min-height of 100%, as well as a bottom padding of 70px. And a clearfix, too.
    Finally, give the footer a top-margin of -70px.

    #123671
    Paulie_D
    Member

    With the method I gave there is NO requirement for positioning of any kind.

    It’s all handled by 100% heights / margins & padding.

    #123687
    Paulie_D
    Member

    On your front page the footer still has **position:absolute** applied.

    Take that off and it will center.

    On your contact page the footer is still in the wrapper.

    #123691
    Senff
    Participant

    I still see the footer within the wrapper. You’ll need to move it out of there.

    Also, you can’t set the body as the “main block”, because you’ll need a footer at the SAME level as the main block. With the body as the main block, you’ll always have the footer WITHIN it.

    #123699
    Paulie_D
    Member

    Well I did it in Chrome Developer tools and it did so that’s where that came from.

    To center it on your front page you need to add

    margin:0 auto;

    As for the stickyness, then @Senff has covered that. The footer needs to be outside of the wrapper AFAIK.

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