Page 1 of 1

aligning images to the bottom of a container

Posted: Fri Apr 01, 2005 6:20 pm
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?

Posted: Sat Apr 02, 2005 3:18 pm
by Chris Corbyn
Stick an invisible/transparent empty div of pre-calculated fixed height above each image to push the image downwards? :?

Posted: Sat Apr 02, 2005 5:37 pm
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.

Posted: Sat Apr 02, 2005 8:12 pm
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>