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.
9 comments
Comments feed for this article
Trackback link
July 21, 2006 at 11:40 am
steven
thanks so much for this tutorial, i spent all morning looking for this
September 21, 2006 at 9:47 pm
Joe Blow
This is totally was what I needed to find. But I’m only 1/2 way there. I need to do this within a table cell that’s sized with a percentage value.
November 9, 2006 at 11:21 pm
Jesper
I will be spending all night, figuring out how to place something in the bottom right of a parent set to display: table
Somethings rotten with my css. ;-)
December 6, 2006 at 1:32 am
Al
great tute, this was giving me trouble this morning too
January 16, 2007 at 10:56 pm
Phil
Cheers
Very annoying that even the latest version of css cannot do this extremely simple task.
April 22, 2007 at 2:58 am
Matt
Sweet!!! It worked perfectly and I was delighted to find it after all the time I spent trying to get this bottom-right position result. Actually, I have done this before but it’s been so long since I have coded a web page that I had forgotten what the secret was and all my Googling wasn’t turning up the answer. Thanks again, I really do appreciate it.
July 18, 2007 at 6:52 pm
Iain
Very nice, but it only works with inline elements. I’m trying to float a menu in a , but it ends up on top of my text. Any bright ideas?
And I’ll agree with Phil, css is very infuriating somtimes - this should be trivial!
August 4, 2007 at 12:26 am
Jamon
I’ve gotten this far–but now how do I wrap text around this div? :) Currently my text simply goes underneath this div since it is absolutely positioned.
Can’t be done?
October 24, 2007 at 3:06 pm
Dan
Holy crap, that was awesome. I wish there were some compensation for the hours you’ve saved people with this - good job!