How to vertically align a div in div at bottom?

Hi,

How to vertically align a div at bottom which is in another div ?

I have a outer div box of 500px width and 250px height.

In that i have another inner div which has some text.
The text in inner div is showing at top, left.

How to bring at bottom ?

I have this:

========================
| Div with text                       |
|                                         |
|                                         |
========================


I want this: Vertically align: bottom ?
========================
|                                         |
|                                         |
| Div with text                       |
========================

My code is this:

<div style="width:500px; height:250px; background-image: url('http://farm5.static.flickr.com/4056/4438272805_0abbbbaff2_o_d.jpg');">
		<div class="transbox">
			<p class="title">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
			<p class="desc">This is a 2 line description of the above title etc. This is a 2 line description of the above title etc.</p>
		</div>
</div>

Thanks.

It’s not easy in all browsers, but in modern browsers (including IE8 and above), you can give the outer div display: table, and the inner div


{display: table-cell; vertical-align: bottom;}

Actually I would suggest :


	.transbox{display: inline-block;    vertical-align: bottom; border:1px solid yellow; width:100%; line-height: 1}
	.tboxWrap{ width:500px; height:250px; background-image: url('http://farm5.static.flickr.com/4056/4438272805_0abbbbaff2_o_d.jpg');  line-height:250px}	

or if you did not know the height of the container


	.tboxWrap{ width:500px; height:250px; background-image: url('http://farm5.static.flickr.com/4056/4438272805_0abbbbaff2_o_d.jpg');   
	zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);	


}	
	.tboxWrap:after{ content:""; height:100%;  width:0; display: inline-block;  }	
	.transbox{display: inline-block;vertical-align: bottom;   width:100%; margin-right: -.25em; }