How to make a div/span at the bottom right of a div with CSS<!-- --> | <!-- -->Patrick Desjardins Blog
Patrick Desjardins Blog
Patrick Desjardins picture from a conference

How to make a div/span at the bottom right of a div with CSS

Posted on: January 28, 2013

You need to set the parent container to relative. When the position is relative, everything that will be under the container with the position to absolute will be absolute to the relative parent.

1.parent { position: relative; }
2
3.child { position: absolute; bottom: 0; right:0; }

From here, if you create a child inside the parent container, the child will be at the bottom of the parent.

1This is the parent container
2
3
4
5
6
7This is the parent container
8
9
10
11
12
13
14
15Last line at the bottom

An absolute div (or any other element) relative to the first relative parent. In the case that no element has been marked something else than the static (like to relative) than the first element will be used which is the Html element.

cssBottomRight 400x223

You can see the result in action with JSFiddle here.