Lock element to bottom of containing div

Question

#Container {
    width: 500px;
    height: 600px;
}

#TheElement {
    width: 500px;
    height: 100px;
    background-color: #000000;
}

How do i get #TheElement to be locked to the very bottom of #Container, regardless of the other content inside container, without a bunch of margin trickery?

score 82 · Accepted Answer · answered Feb 27 '11 at 21:11

82

You can use relative absolute positioning:

http://jsfiddle.net/gzJM6/

#Container {
    width: 500px;
    height: 600px;
    position: relative
}

#TheElement {
    width: 500px;
    height: 100px;
    background-color: #000000;
    position: absolute;
    bottom: 0;
    left: 0;
}

answered Feb 27 '11 at 21:11

thirtydot

217,782
47
385
346

That was the first thing i tried, but it dosent work for some reason – WillingLearner Feb 27 '11 at 21:13
Check my jsFiddle, it seems to work fine. Could you provide more detail about your situation? – thirtydot Feb 27 '11 at 21:14
Oh... i missed the relative positioning on the #Container. It works now. Thanks. – WillingLearner Feb 27 '11 at 21:21
Yup, that's important as `position: absolute` is in fact relative to the closest parent element that has been `position`ed. – Nils Werner Feb 27 '11 at 21:27

Lock element to bottom of containing div

1 Answers1