I'm working on an HTML email that contains a list of items and am wondering if the below design is possible, considering the restrictions of email clients.
Currently, I have a table for each item with two cells (we'll call this item-table
). The first cell (info-cell
) is of variable height and contains item information and links. The second cell (image-cell
) contains an image and is also of variable height. This question pertains to this first cell.
I have a table nested in info-cell
with two rows, each with one cell. We'll call these cells info-cell-top
and info-cell-bottom
.
The desired outcome is to have info-cell-top
aligned to the top and with info-cell-bottom
aligned to the bottom of info-cell
, regardless of the height of item-table
.
As this is markup for email, I cannot use rowspan="2"
on image-cell
to solve this problem. While it works for some desktop email clients, for mobile clients the image cell disappears entirely.
I have also tried to make the inner table stretch to the full height of info-cell
, using both height="100%"
and height="1"
.
Both of these solutions look fine in the browser but do not work for email.
Also available to play with at jsfiddle.
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-top: 1px solid #bbbbbb;">
<tbody>
<tr>
<td style="padding: 16px 0px; border-bottom: 1px solid #bbbbbb;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="1">
<tbody>
<tr>
<td style="vertical-align: top;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
<tbody>
<tr>
<td style="vertical-align: top;">
<strong><a href="#" style="color: #000000; text-decoration: none;">Top aligned</a></strong>
<br>Price
<br>Size
<br>
<br>Wishlist comment - Phasellus sollicitudin consequat consectetur. Morbi a elit leo. Aliquam velit nibh, aliquet quis posuere at, vestibulum nec orci.
</td>
</tr>
<tr>
<td style="vertical-align: bottom;">
<br>
<br> <strong><a href="#" style="color: #000000; text-decoration: none;">Bottom aligned</a>
<a href="#" style="color: #000000; text-decoration: none;">Add to cart</a>
</strong>
</td>
</tr>
</tbody>
</table>
</td>
<td width="120px" valign="bottom" style="padding-left: 16px;">
<div style="text-align: center; background: #ddd; height: 200px;padding: 30px 10px;box-sizing: border-box;"><b>Image with variable height</b>
<br>
<br>(may be shorter than left column)
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Any suggestions for what I could do to achieve my desired outcome? Can you help?
Swap out your CSS vertical-align:top;
in the td's for this: <td valign="top">
.
valign
accepts top|middle|bottom values, while align
(horizontal) accepts left|center|right.
For this layout, you will also need either rowspan or a fixed height, as a nested table (your 2 rows of text) will not push to the max height of the container cell.
Here is a basic example of both valign and rowspan applied:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="400" height="200" valign="top" bgcolor="#EEEEEE">Align Top
</td>
<td width="200" rowspan="2" valign="middle" bgcolor="#777777">
<img alt="image" src="" width="200" height="300" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td width="400" height="300" valign="bottom" bgcolor="#CCCCCC">Align Bottom
</td>
</tr>
</table>
It helps to set a height on your rowspanned cells, as Outlook can sometimes guess and mess up your rowspan break points. More info on that here (although it refers to colspan, the same applies)