Setting text vertical align to bottom in div tag
 

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?

Re: Setting text vertical align to bottom in div tag
 

try this

#header2 {

  vertical-align:bottom;

  padding-bottom:0;

  float: left;

}

Re: Setting text vertical align to bottom in div tag
 

No, it didn't work :(

Re: Setting text vertical align to bottom in div tag
 

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;

}