Div align at the bottom of the page.

Discussion in 'HTML & Website Design' started by Rhythm, Jun 26, 2007.

  1. #1
    Well i'm having extreme troubles with this I'm sure it's probably something stupid i'm missing. Anyways I want to align a div at the bottom of the page so If I add content the div won't go over or behind the content it will remain at the bottom of the page..

    Bottom:0; doesn't seem to work in css and I was wondering if you guys knew what it was?

    Thank you. :)
     
    Rhythm, Jun 26, 2007 IP
  2. Ginger Ninja

    Ginger Ninja Guest

    Messages:
    161
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try position:absolute; bottom:0;

    You would get more help if you posted your XHTML/CSS. Also, try googling for sticky footer. I think someone managed to create a fool proof version of it.
     
    Ginger Ninja, Jun 27, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    position:absolute/bottom:0 has problems when the content gets too long, it doesn't push down and ends up atop the content... assuming as you said you want it at the 'bottom of the page' NOT the 'bottom of the screen.' - there is a difference.

    The best way to put the footer at the bottom of the page if too long, or bottom of the screen if the content is short (or at really high resolutions) is what's called a '100% height model'

    The easiest way to do that?

    body,html {
    height:100%;
    }

    #container {
    min-height:100%;
    }

    * html #container {
    height:100%; /* lte IE6 treats height as min-height */
    }

    footer {
    height:40px;
    margin-top:-40px;
    position:relative;
    }

    The footer goes AFTER you close your #container div, and you have to add padding-bottom to your content inside #container equal to the height of your footer (40px in this example, I'd add another 8px or so to have actual padding between content and footer)

    Have a look at the code for this:
    http://battletech.hopto.org/for_others/3coltable_SEO/template.html

    It uses that same technique - and even though that one is table based, the principle is the same with non-table layouts.
     
    deathshadow, Jun 27, 2007 IP