Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 63150

Mar 23rd, 2008

Setting text vertical align to bottom in div tag

Expand Post »

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:

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

Similar Threads

Open In New Window Php in PHP

kezia_kristina

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Dec 2007

Permalink

Mar 24th, 2008

Re: Setting text vertical align to bottom in div tag

Click to Expand / Collapse Quote originally posted by kezia_kristina ...

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

try this

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

rudevils

Reputation Points: 10

Solved Threads: 10

Junior Poster in Training

Offline

80 posts
since Jan 2008

Permalink

Mar 24th, 2008

Re: Setting text vertical align to bottom in div tag

No, it didn't work

kezia_kristina

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Dec 2007

Permalink

Mar 24th, 2008

Re: Setting text vertical align to bottom in div tag

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

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

rudevils

Reputation Points: 10

Solved Threads: 10

Junior Poster in Training

Offline

80 posts
since Jan 2008

Permalink

Mar 9th, 2010

Re: Setting text vertical align to bottom in div tag

What about something like:

HTML and CSS Syntax (Toggle Plain Text)

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

xoinas

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Jul 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: removing div magins for printing

Next Thread in HTML and CSS Forum Timeline: Table collum width of text

DaniWeb Message

Cancel Changes

User Name
Password