PDA

View Full Version : vertical-align an image to bottom of div



jcwilde1
March 19th, 2007, 01:55 PM
I am trying to align an image to the bottom of a div so that the text will span the whole width of the div above the image but wrap to the image when it gets to it. I can get the image to align to the bottom by playing with the padding and margins but then the text doesn't go all the way across.

Here is the code that goes to the image that is not bottom aligned.



<td width="380" height="150" align="center" ><div style="height:150px; width:380px; overflow:hidden; border:#990000 dashed 1px; padding:2px; font-family:Arial, Helvetica, sans-serif; display:block;">
<span style="font-size:14px; color:#009900; font-weight:bold;">$10.00 CVB Discount "Rest/Refresh/Replenish"</span>
<img src="../HOTEL LOGOS/Howard Johnson logo.GIF" width="130" height="65" style="vertical-align:bottom; float:right; position:relative;" />
<p style="font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:left; padding:0px; margin:0px">This holiday season enjoy the comforts of a spacious suite at Aesadfjsdf Metcalf. There;s free breakfasst, hish speed interet and we are sdf on 213 street on miniumte from the shopping and dinning. There;s free breakfasst, hish speed interet and we are sdf on 213 street on miniumte from the shopping and dinning. <br />
<span style="font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif">CALL 913-545-5252 or 800-996-3565 or visit <a href="sdfad">www.wwhithavensuper8.com</a></span>
<br />
<span style="font-size:8px; font-family:Arial, Helvetica, sans-serif">Offer valid through 2/15/07 only at the 119 metcalf subject to availiability and other stuff that is beyond everyones controll except for us becasue we are definatly the coolest ones on the planet. </span>
</p>

</div>
</td>

jcwilde1
March 19th, 2007, 03:04 PM
I forgot to mention the reason I need to do it this way is because I am going to generate over 50 coupons using different amounts of text and sizes of images.

Is aligning it the way I want even possible or do I need to find another way?

jcwilde1
March 19th, 2007, 05:06 PM
I finally solved it, I had to put an empty div above the image and use the "clear:right" property so they both float on top of each other. Now all I have to do is change the height of the empty div to offset the height of the image with php.

4 hours for a sloppy solution :puzzle: