Setting text vertical align to bottom in div tag

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,971 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,157 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 4342 | Replies: 3

•

Join Date: Dec 2007

Posts: 2

Reputation: kezia_kristina is an unknown quantity at this point

Rep Power: 0

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 5:00 am. Reason: [icode]is for one line of code, [code] is for multiple lines

•

Join Date: Jan 2008

Location: Bali - Indonesia

Posts: 61

Reputation: rudevils is an unknown quantity at this point

Rep Power: 1

Solved Threads: 7

rudevils

Offline

Junior Poster in Training

Re: Setting text vertical align to bottom in div tag

Mar 23rd, 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 5: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

Rep Power: 0

Solved Threads: 0

kezia_kristina kezia_kristina is offline

Offline

Newbie Poster

Re: Setting text vertical align to bottom in div tag

Mar 23rd, 2008

No, it didn't work

•

Join Date: Jan 2008

Location: Bali - Indonesia

Posts: 61

Reputation: rudevils is an unknown quantity at this point

Rep Power: 1

Solved Threads: 7

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

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

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

Post your article at Bali Side Notes share your knowledge