I’ve set up a bare bones test here: https://www.emailonacid.com/app/acidtest/display/summary/eypNVE82ae543QsSdfiYJlcLNqtcmvKz1ybIvJRlCPj2n/shared
The simple goal is to have the main text align to the top of its TD, and the CTA text align to the bottom of its TD. As you can see, this is happening in every client except the Outlooks noted above (ignore mobile for this question).
It's worth noting that we do not know if the CTA will be only one line or more, so we can't fix the height of it's TD in order to force it to the bottom with a spacer.
I’ll post the code snippet below.
<table width=“640” border=“0” cellpadding=“0” cellspacing=“0”> <tr> <td valign=“top”>http://imgs.elainemedia.de/w4gu/f8451d426cd5373fde24a98fcf496945.jpg</td> <td valign=“top” bgcolor=”#000000”><table width=“100%” border=“0” cellspacing=“0” cellpadding=“0”> <tr> <td rowspan=“2” valign=“top”>http://imgs.elaine-asp.de/w4gu/1fce9767d9699082bfea5b0c475aece5.gif</td> <td valign=“top”>Buy a Pro’s Bike Ridden by the world’s finest, now available to you. With our Original Pro Bikes it’s easier than ever to own a unique piece of cycling history.</td> </tr> <tr> <td valign=“bottom” style=“color:#ffffff;”>CTA GOES HERE</td> </tr> </table></td> </tr> </table>
Hi dhinshaw, that's a tricky one - I can believe that Outlook isn't respecting valign. You may have to a) have the CTA right after the text, or b) re-cut the image so there are two rows in each column. Alternately, have you tried giving the uppermost table cell with text a height="100"?
I think I solved the problem. By giving both cells a height that combined equal the height of the adjacent image I am able to force the top one to top align and the bottom one to bottom align. And it seems to matter not if the bottom one is slightly deeper than its actual contents. In fact if I make it enough deeper the CTA can even wrap to two lines no problem. Just so long as the 2 heights add up to the height of that image. Imagine that! :)