Positioning a div at the bottom of a fixed size container

Question

I am having trouble finding a way to position a div at the bottom of the container.

What I tried:

position:absolute;
bottom:10px;

But it displays the div I need at the bottom, outside the container in which I need it in...

I appreciate any help in this regard.

Heres the jsfiddle showing the example:

http://jsfiddle.net/Gd6JC/

This question has been asked dozens of times - http://stackoverflow.com/questions/311990/how-do-i-get-a-div-to-float-to-the-bottom-of-its-container?rq=1 — Wex, Jul 12 '12 at 17:09

score 2 · Accepted Answer · answered Jul 12 '12 at 17:10

2

Set the container to position: relative and make sure that the <div> you are trying to position at the bottom of the container is nested inside the container.

http://jsfiddle.net/Wexcode/RdjS3/

answered Jul 12 '12 at 17:10

Wex

15,539
10
64
107

score 0 · Answer 2 · answered Jul 12 '12 at 17:11

0

All you need to do is add the rule position: relative to the containing div.

http://jsfiddle.net/saluce/Gd6JC/1/

answered Jul 12 '12 at 17:11

saluce

13,035
3
50
67

Positioning a div at the bottom of a fixed size container

2 Answers2