Setting text vertical align to bottom in div tag

[kezia_kristina]

Hi all,
I want to set the text on the right side of image to bottom in a div tag.
depict like below:

______
| img |
| |
|_____| The text is here at the bottom of Image

But after trying some CSS code (using 'vertical-align:bottom'), I always got something like below (there is aways a padding on the bottom, even I set the padding-bottom to zero):
______
| img |
| | The text is here at the bottom of Image
|_____|

Here my code:

<div class='title'>
	<div class='date'>
			<!-- the image is a background of this 'div' -->
	</div>
	<h2 id='header2'>
	 The text is here at the bottom of Image
	</h2>
</div>


.title {
  padding:0 0 0 0;
  vertical-align:bottom;
  height:56px;
}

.date 
{
	float:left; width:59px; height:56px; overflow:hidden; 
	text-align:center; 
	background: url("someurlHere/icon.jpg") no-repeat;
}

#header2 {
  vertical-align:bottom;
  padding-bottom:0;
}

Anyone can help me?

[rudevils]

#header2 { vertical-align:bottom; padding-bottom:0; } Anyone can help me?

try this

#header2 {
  vertical-align:bottom;
  padding-bottom:0;
  float: left;
}

[kezia_kristina]

No, it didn't work :(

[rudevils]

sorry i didn't see height attribute in your ".title"
try it like this :

.title {
padding:0 0 0 0;
text-align: left;
}

.date {
width:59px; height:56px; overflow:hidden;
text-align:center; 
background: url("someurlHere/icon.jpg") no-repeat;
}

#header2 {
padding:0;
margin:0;
}

[xoinas]

What about something like:

.title
{
  position: relative;
  width: 100px; 
  height: 100px; (put your dimensions, at least only the height)
}

#header2
{
  position: absolute;
  bottom: 0px;
  left: 0px; (or right:0px if you want to anchor it to the right-bottom corner)
}