aligning images to the bottom of a container

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
nleco
Forum Newbie
Posts: 9
Joined: Mon Oct 11, 2004 4:50 pm

aligning images to the bottom of a container

Post by nleco »

Here is my situation. i have a definition list. one of the rows has a row of icons.

ie: <dd><img/><img/><img/></dd>

these images are of different height, and not all show up at one time. what i want to do, is give the dd a permanent height and have all images aligned to the bottom of the <dd> element. I notice that the css "vertical-align" propertie only works on images, and will only align itself to the bottom of the containing content.

any thoughts?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Stick an invisible/transparent empty div of pre-calculated fixed height above each image to push the image downwards? :?
nleco
Forum Newbie
Posts: 9
Joined: Mon Oct 11, 2004 4:50 pm

Post by nleco »

i'd do that. but that's more of a hack. i was curious if anyone knew the right way to do it. i COULD give each image a class, and from that decide how much padding to put above it. but i'm not sure i want to do that.
User avatar
SystemWisdom
Forum Commoner
Posts: 69
Joined: Sat Mar 26, 2005 5:54 pm
Location: A Canadian South of the 49th Parallel

Post by SystemWisdom »

Put them in a table instead.. like:

Code: Select all

<table cellpadding=&quote;0&quote; cellspacing=&quote;0&quote; border=&quote;1&quote;>
 <tr>
  <td style=&quote;height: 100px; vertical-align:bottom;&quote;><img /></td>
 </tr>
</table>
Post Reply