943,865 Members | Top Members by Rank

Ad:
Mar 23rd, 2008
0

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)
  1. <div class='title'>
  2. <div class='date'>
  3. <!-- the image is a background of this 'div' -->
  4. </div>
  5. <h2 id='header2'>
  6. The text is here at the bottom of Image
  7. </h2>
  8. </div>
  9.  
  10.  
  11. .title {
  12. padding:0 0 0 0;
  13. vertical-align:bottom;
  14. height:56px;
  15. }
  16.  
  17. .date
  18. {
  19. float:left; width:59px; height:56px; overflow:hidden;
  20. text-align:center;
  21. background: url("someurlHere/icon.jpg") no-repeat;
  22. }
  23.  
  24. #header2 {
  25. vertical-align:bottom;
  26. padding-bottom:0;
  27. }
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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
kezia_kristina is offline Offline
2 posts
since Dec 2007
Mar 24th, 2008
0

Re: Setting text vertical align to bottom in div tag

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

html Syntax (Toggle Plain Text)
  1. #header2 {
  2. vertical-align:bottom;
  3. padding-bottom:0;
  4. float: left;
  5. }
Last edited by peter_budo; Mar 24th, 2008 at 6:00 am. Reason: Keep It Organized - please use [code] tags
Reputation Points: 10
Solved Threads: 10
Junior Poster in Training
rudevils is offline Offline
80 posts
since Jan 2008
Mar 24th, 2008
0

Re: Setting text vertical align to bottom in div tag

No, it didn't work
Reputation Points: 10
Solved Threads: 0
Newbie Poster
kezia_kristina is offline Offline
2 posts
since Dec 2007
Mar 24th, 2008
0

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)
  1. .title {
  2. padding:0 0 0 0;
  3. text-align: left;
  4. }
  5.  
  6. .date {
  7. width:59px; height:56px; overflow:hidden;
  8. text-align:center;
  9. background: url("someurlHere/icon.jpg") no-repeat;
  10. }
  11.  
  12. #header2 {
  13. padding:0;
  14. margin:0;
  15. }
Reputation Points: 10
Solved Threads: 10
Junior Poster in Training
rudevils is offline Offline
80 posts
since Jan 2008
Mar 9th, 2010
0
Re: Setting text vertical align to bottom in div tag
What about something like:
HTML and CSS Syntax (Toggle Plain Text)
  1. .title
  2. {
  3. position: relative;
  4. width: 100px;
  5. height: 100px; (put your dimensions, at least only the height)
  6. }
  7.  
  8. #header2
  9. {
  10. position: absolute;
  11. bottom: 0px;
  12. left: 0px; (or right:0px if you want to anchor it to the right-bottom corner)
  13. }
Reputation Points: 10
Solved Threads: 0
Newbie Poster
xoinas is offline 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.
Message:
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





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC