7

The problem

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.

item listing

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

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.

item listing - notes

What I've tried

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.

The code

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>
                                        &nbsp;&nbsp;&nbsp;<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>

The plea

Any suggestions for what I could do to achieve my desired outcome? Can you help?

chicgeek
  • 486
  • 3
  • 16
  • Tricky problem but well worded. It's not ideal but as you won't get the `height: 100%` working across e-mail clients it might just be worth putting a few `
    `s in after your `infocelltop` content. As long as you have your `valign`s in place the content in the bottom cell will stick to the bottom of the table, provided the content within `infocelltop` is longer than the height of the image beside.     –  Apr 10 '14 at 16:14
  • Yes, I have a couple of `
    `s in as a prop between the two sections. There is no guarantee that `info-cell` is longer than `info-image` - actually, in my tests it's happens only about half the time. I had hoped my diagram helped indicate this, but as you said... it's tricky to explain. ;)     – chicgeek Apr 10 '14 at 16:29

1 Answers1

5

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)

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
  • Hi John, thanks for your answer but in my question I clarified that my cells must be allowed to use fluid height (read: cannot be fixed), and that rowspan is not a valid solution (it breaks in a few email clients, not just Outlook). I've taken note about using the `valign` attribute instead of `vertical-align` - cheers! – chicgeek Apr 14 '14 at 09:02
  • They are the only 2 options for what you want to do, so you need to choose one. As you do not want fixed, the only way in html email to accomplish what you are after is with rowspan. In my example, I've set heights on the spanned cells, but you can consider them min-height - your text will make them taller if necessary. Removing the height may also work fine for your needs. Rowspan works in all major clients. You can check my example in Litmus - it works on everything except Blackberry. – John Apr 14 '14 at 13:58
  • Neither fixed height nor rowspan is an option. My question posed "is this possible", so it seems the answer is no. Thanks for your investigations, though! Overwhelmingly, the community warns to avoid rowspan, so I will do the same: http://stackoverflow.com/a/2229940/1846329 – chicgeek Apr 15 '14 at 10:35
  • I just tested it in Litmus and it worked - proving "is this possible" to be true. The "weird spacing issues" referred to in that post are most likely in relation to Outlook. I addressed that scenario in [the link I included](http://stackoverflow.com/questions/9697788/html-email-is-colspan-allowed/16964122#16964122) (although it focuses on colspan, the same quirk applies to rowspan). A possible spacing issue is probably irrelevant in your scenario as you are valigning top/bottom. Also, much of the Stack Overflow community is misinformed about html email - they come from a web background. – John Apr 15 '14 at 13:46