using vertical align

for example if there is a container div which holds an inner div, if i want the content of the inner div to appear exactly at the bottom edge of the inner div i have used the following code,
#outer{
position: relative;
float: left;
width: 900px;
height: 200px;
}
#outer .inner{
position: relative;
float: left;
width: 500px;
height: 200px;
vertical-align: bottom;
}

however the content of the inner div is starting at its default location which is top left of the inner div

instead of using margin-top or padding-top, or positioning methods for the inner div to position the content at the bottom edge can the vertical-align: bottom; be used as this will be very accurate placed at the bottom edge even if the content increases the content will always appear at the bottom edge, unlike other methods where the margin-top, padding-top, and positioning, these values will have to be changed whenever content increases or decreases.

please advice.

thanks.

#outer{
position: relative;
float: left;
width: 900px;
height: 200px;
}
#outer .inner{
position: absolute;
left:0;
bottom:0;
width: 500px;
height: 200px;
}

thanks for replying

the code works however if a same height value is mentioned for the inner div then the inner div content starts at its default location top left so i had to specify the height as auto to the inner div or a value of less than the height of the container div

setting height to auto for inner div works best

As far as I know vertical-align can only be used for images. In XHTML