Need css help with sticky footer

4 replies
  • WEB DESIGN
  • |
I'm trying to get my footer to stick at the bottom. Right now it's about 1/4 inch from the bottom and I have no idea how to lower it all the way. Attached is the footer css code. Tired of trying to figure this out. Any help would be greatly appreciated, thnx.
#css #footer #sticky
  • Profile picture of the author duluthminnesota
    I could be of help if I could see it live. I use firbug in Firefox to tweak out stuff like this. Probably an easy fix if I could see it. Best of luck to you.
    {{ DiscussionBoard.errors[6058633].message }}
    • Profile picture of the author duluthminnesota
      This is how I have the CSS in my footer. Might be of help.

      #footer {
      background: url("../design/footer.jpg") no-repeat scroll 0 0 transparent;
      clear: both;
      color: #6685CC;
      height: 60px;
      left: 5px;
      margin-bottom: 0;
      position: relative;
      width: 760px
      {{ DiscussionBoard.errors[6058676].message }}
  • Profile picture of the author IM-software
    Hi Brian,

    try:
    #footer {bottom:0;margin-bottom:0;vertical-align:bottom;}
    Or
    #footer {bottom:0;margin-bottom:0;vertical-align:baseline;}

    And, according to the result you want, and to the whole structure, you may add:
    #footer {position:absolute;bottom:0;margin-bottom:0;vertical-align:baseline;}
    OR
    #footer {position:fixed;bottom:0;margin-bottom:0;vertical-align:baseline;}

    Now, be aware that it all depends on how you treat the whole page, either html or xhtml, i.e. the DOCTYPE.
    On how you treat both the body and the container layer, if any, etc...

    CSS is Russian puppets alike. Every element is interdependent... So, the best is you to test
    And don't forget to test your creation within, at least, the five major browsers.
    If you don't get all of'em installed, you may find online browser emulators.
    {{ DiscussionBoard.errors[6059545].message }}
  • Profile picture of the author KingOfPLRArticles
    I'm usually the most partial to this style..

    #footer {position:absolute;bottom:0;margin-bottom:0;vertical-align:baseline;}
    {{ DiscussionBoard.errors[6059631].message }}

Trending Topics