Keep div at the bottom of another div - css

Question

© 1965 - 2010

I want the #copyright to be at the bottom of #outer

Here is the css for #copyright

#copyright{
    position:relative; margin-bottom:0px; width:672px; height:20px; color:#FFF;
}
#yr{
    margin:auto;
}

#f{ position:absolute; right:0px; text-align:center;
}

Thanks Jean

Answer 1

#copyright {
    position: absolute;
    bottom: 0;
}
#outer {
    position: relative;
}

This will have the unfortunate side effect though that #copyright does not count towards the height of #outer anymore, in your example #outer would be 0px high. You can add a bottom-padding to #outer if you're working with fixed heights.

#copyright {
    position: absolute;
    bottom: 0;
    height: 200px;
}
#outer {
    position: relative;
    padding-bottom: 200px;
}

Answer 2

1. define height of #outer
2. set #outer to position:relative;
3. set #copyright to position:absolute; bottom: 0; left: 0;

    #outer {
      height: 100px;
      border: 1px solid red;
      position: relative;
    }

    #copyright {
      position:absolute; 
      height: 30px; 
      bottom: 0; 
      left: 0;
      border: 1px solid black;
      width: 300px;
    }   

    <div id="outer">
       <div id="copyright">
           <span id="yr">© 1965 - 2010</span>
           <span id="f"></span>
           <span id="d"><span>
       </div>
    </div>

Also, never use "0px". There is no such thing as zero pixels, only zero. Correct way is "right: 0;"