Positioning to the Bottom Right

You’ve figured out how to float left, align top, and use margins to cleverly move elements in all four directions. But how do you get an element to stick to the bottom right corner?

As a rule of thumb, absolute and relative positioning should only be used as a last resort because of their associated risk of overlapping elements in a small viewing area. However, there is one instance where positioning is the only tool that will do the trick. If you need an element – a link or continue button for example – to stick to the bottom right corner of a container no matter what content is in the box, or what size the box is, then there is no other reliable method. (A combination of a right float and a top margin will only work if the elements above are of a constant width.)

For this example, we will make a continue link “stick” to the bottom right corner of a div using an often-overlooked characteristic of absolute positioning.

First give the parent element, the div, relative postioning. However, don’t give it any position values (top or left). This will leave the div in its normal position, but will give it properties that we will exploit in the next step.

div {position: relative; border: 1px solid #ccc}*

Next give the child element, the anchor tag, absolute positioning. This will position it in terms of its containing block. When dealing with absolute positioning, many people assume that the browser window or viewport itself is the containing block. However, a postioned element’s containing block is in fact its nearest positioned parent. In many cases, the viewport is the nearest positioned parent. However, you can position any parent as needed. In this case, we have positioned the div, so the anchor tag’s absolute positioning will be with respect to the div.

a.continue {position: absolute; bottom: 0; right: 0}**

This will set the link’s right and bottom edges to line up with the div’s edges. We may want a bit of space between the two, so specify that the edges be a bit further apart:

a.continue {position: absolute; bottom: 0.3em; right: 0.3em}

Making it work across browsers

We just need to make one tweak to accommodate IE6. There is a rendering error if the div doesn’t have a specified height. Use the Holly hack to “dimension” the containing block:

div {position: relative; border: 1px solid #ccc; height: 1%}

View the completed sample file.

Notes

* Also add a temporary border so we can see what we are doing.
** I have added a class for novice users; more experienced users should use type selectors where possible.