DIV align bottom right (or left!)

This was always one of those problems that I had with CSS – getting the content to align to the bottom of it’s containing DIV, be it left or right align. So here’s how to do it.

The key is to use to the “position” property. Give your containing DIV a relative position and the content an absolute position.

I find these things easier if you can just take an example page and play with it in your own time so download this single HTML page and play away.

For those that like the code here it is:

CSS

#container
{
width: 300px;
height: 200px;
border: solid 1px #000;
position: relative;
}

#bottom-right
{
right: 0;
bottom: 0;
position: absolute;
}

#bottom-left
{
left: 0;
bottom: 0;
position: absolute;
}

HTML

<div id=”container”>
<div id=”bottom-right”>
bottom right
</div>
<div id=”bottom-left”>
bottom left
</div>
</div>

Related posts:

1. Centre DIV Horizontally and Vertically using CSS
2. Create an HTML Signature for Apple Mail
3. IE6 Div Height Problem
4. Should you remove the border on clicked links

No comments