HTML and CSS

Setting text vertical align to bottom in div tag

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Dec 2007

Posts: 2

Reputation: kezia_kristina is an unknown quantity at this point

Solved Threads: 0

kezia_kristina kezia_kristina is offline

Offline

Newbie Poster

Setting text vertical align to bottom in div tag

Mar 23rd, 2008

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:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<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;
}
<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?

Last edited by peter_budo; Mar 24th, 2008 at 6:00 am. Reason: [icode]is for one line of code, [code] is for multiple lines

•

Join Date: Jan 2008

Posts: 79

Reputation: rudevils is an unknown quantity at this point

Solved Threads: 9

rudevils

Offline

Junior Poster in Training

Re: Setting text vertical align to bottom in div tag

Mar 24th, 2008

•

Originally Posted by kezia_kristina

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

try this

Help with Code Tags

html Syntax (Toggle Plain Text)

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

Last edited by peter_budo; Mar 24th, 2008 at 6:00 am. Reason: Keep It Organized - please use [code] tags

If love is blind, why there's a bikini ??

Post your article at Bali Side Notes share your knowledge

•

Join Date: Dec 2007

Posts: 2

Reputation: kezia_kristina is an unknown quantity at this point

Solved Threads: 0

kezia_kristina kezia_kristina is offline

Offline

Newbie Poster

Re: Setting text vertical align to bottom in div tag

Mar 24th, 2008

No, it didn't work

•

Join Date: Jan 2008

Posts: 79

Reputation: rudevils is an unknown quantity at this point

Solved Threads: 9

rudevils

Offline

Junior Poster in Training

Re: Setting text vertical align to bottom in div tag

Mar 24th, 2008

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

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

.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;
}