CSS: Making footer stay at the bottom

Discussion in 'Web Design & Coding' started by Zedric, Nov 9, 2003.

  1. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    I'm making a layout using CSS. It's for a very dynamic system, and with no frames. What I want is a footer at the bottom with copyright and email and stuff. The problem is, if the page is smaller than one screen height, the footer will not be at the bottom of the screen. Is there any way of solving this? Preferrably with CSS.
     
  2. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    Code:
    .footer { 
      position:fixed;
      right: 2px;
      bottom: 2px;
      text-align: right;
      border: 0px;
      background-color:transparent;
    }
    <div class="footer">&copy; 2003</div>
    That would give you a footer at the bottom right of the window.
    If you wanted it centered you could make the div 100% wide and use text-align:center;
     
  3. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    SPeedY_B and XHTML + CSS = very nice layouts.
     
  4. grimman

    grimman Guest

    It wouldn't be centered properly as it would use the initial size of the browser window... and you don't want to use a background color for the same reason, once you resize the window the field will just stay there, looking horribly ugly.

    Tables on the other hand... they can do the dynamic resize. ;>
     
  5. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    I'll be damned. :) DW didn't have fixed as an option. It works great in Mozilla (not the way I wanted, but this is pretty cool) :). But it doesn't work at all in IE. :mad:

    Any more ways? It doesn't have to be onscreen all the time btw, it just has to stay at the bottom of the page.
     
  6. grimman

    grimman Guest

    It do a table.

    <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr><td>main content in this cell</td></tr>
    <tr><td height="10" align="right">my footer here</td></tr>
    </table>
     
  7. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    No, the height attribute doesn't work. At least not in Mozilla which is most important.
     
  8. grimman

    grimman Guest

    Lol, you're so wrong. I'm using it myself.
     
  9. grimman

    grimman Guest

    But one could replace it with style="height:10px;" if one wanted to. ;>
     
  10. grimman

    grimman Guest

    Ack, I feel so spammish.
    For an example (by me, my site), go here:
    http://dlxmedia.net/

    There's a footer... with the swedish cookie-****e. ;(
    Feel free to rob me off my code. ;)
     
  11. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    I'm not wrong, I tested it just before I posted. However, the difference seems to be this: I code using the XHTML1.0 Transitional standard. If I state that that is the case in the code, the height attribute stops working. You don't have any statement of which standard you are working, and it works.

    Since I have to use XHTML I can't use the height attribute. This is starting to annoy me... :mad:

    The cookie-****e is a bit silly isn't it? :D
     
  12. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    Or rather, the "height: 100px" works, but the "height: 100%" does not... :(
     
  13. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    percents are relative, it would be 100% in respect to everything on the page, but there is nothing on the page. AFAIK internet explorer doesn't abide to position:fixed, another reason why it blows.
     
  14. grimman

    grimman Guest

    Ah. So, can't you use a javascript to make a div resize? It's tons dirty, but it's the only trick I can pull out of my sleeve offhand. ;/

    And yes, the cookie****e blows.
     
  15. fusion260

    fusion260 Guest

    Um, just a question:

    Why on earth are you focusing on pleasing a browser used by less than 3% of the worldwide audience? There are ways to make it work for IE/Netscape/Mozilla/Safari. You just have to find it.

    Unfortunately, JavaScript may be your only option.
     
  16. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    Because this is a project where we are making an internal administration system for the school. The users will be running Solaris (unix), so IE is right out. The system has to run in Mozilla and Netscape, so that is what we're designing it for.

    Also, using Javascript is prohibited as far as possible (this is an internal decision of the project group) since it's a good way of destabilizing the system.

    But I grant you, if it had been a public web page it would have been a bit silly. :)
     
  17. fusion260

    fusion260 Guest

    Ah, I see now, said the blind man.

    Ok. Yeah, JavaScript is one of the easiest ways to destabilize the system. Ick to Java.
     
  18. Zedric

    Zedric NTFS Guru Folding Team

    Messages:
    4,006
    Location:
    Sweden
    Nothing wrong with Java. :) It's JavaScript that is crap. They're not really related afaik... :)
     
  19. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    try height: 100pc, I dunno why but the text-indent wouldnt take 15% but seemed to do fine with 15pc
    but then for all I know they could be different measurments, but I cant be arsed to go look
     
  20. fusion260

    fusion260 Guest

    I thought JS was based upon Java. I may be wrong.

    It's just not as cross-browser/platform as they claim it is.

    I can't count how many times people tried this huge JS script on me (with these rediculous looking mouse trails with clocks or huge amounts of pictures and stuff) that just flat out crash the browser good.