Forums

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

Home Forums CSS Sticky Footer

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #40598
    chrisburton
    Participant

    For some reason I cannot get my footer to work correctly no matter what I try. I believe this might have to do with my content being absolutely positioned.

    It works somewhat when I have content that has large height but when my content has very little height, I still have to scroll to see my footer.

    When you minimized the browser window (including height), my footer seems to go up over my content.

    Any ideas?

    http://codepen.io/christopherburton/full/kBmCx
    http://jsfiddle.net/ChristopherBurton/kG2qg/

    #113298
    JDS
    Member

    If all of your content is absolutely positioned, this is definitely the cause. Is there a reason why you have everything absolutely positioned?

    #113299
    chrisburton
    Participant

    Not everything is absolutely positioned. Just my sidebar and content. My body content is absolutely positioned so my slider images on the right will shrink.

    #113303
    HoughtonA
    Participant

    Is position:fixed for the footer out of the question?

    #113304
    chrisburton
    Participant

    Yes. The footer needs to be below the content at all times.

    #113305
    chrisburton
    Participant

    I just noticed that if I put `#sidebar` above `.content` and remove the absolute positioning of `#sidebar`, it works the same. I wonder if that might help.

    See here: http://jsfiddle.net/ChristopherBurton/kG2qg

    #113306
    davidlab.be
    Participant

    This seems to work for me….give it a try

    #page-wrap {
    position: relative;
    max-width: 920px;
    min-height: 100%;
    height: auto !important;
    overflow: hidden;
    margin: 0 auto -40px auto;
    padding: 0 20px -40px 20px;
    }

    #slider img {position: relative; float:right; display: none; max-width: 100%; height: auto !important; right: 0;}
    .footer {
    position: relative;
    width: 100%;
    height: 40px;
    background: #181818;
    color: #f7f7f7;
    font: normal 400 15px “proxima-nova-sc-osf-n4”, “proxima-nova-sc-osf”, “courier new”, sans-serif;
    text-align: center;
    line-height: 40px;

    }

    #113307
    davidlab.be
    Participant

    sorry…messed up the posting format

    #113309
    chrisburton
    Participant

    The slider images cannot be relatively positioned as they are a piece of a slider and it will break.

    See update: http://jsfiddle.net/ChristopherBurton/kG2qg/

    #113310
    davidlab.be
    Participant

    Just tested it in codepen and it seems to work great

    #113311
    chrisburton
    Participant

    @springlab See update above. I added my custom slider in. Now, if you were to try your solution, my slider would be useless. Appreciate the help.

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