Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML email: top and bottom aligned content

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?

like image 299
chicgeek Avatar asked Apr 10 '14 16:04

chicgeek


People also ask

How do I center the contents of an email in HTML?

Try the following: Wrap your content in another table with style="table-layout: fixed;" and align=“center”.

How do I align the content of the bottom in HTML?

Use the text-align property to align the inner content of the block element. Use the bottom and left properties. The bottom property specifies the bottom position of an element along with the position property. The left property specifies the left position of an element along with the position property.

How do I arrange alignment in HTML?

To set text alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property text-align for the center, left and right alignment.


1 Answers

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)

like image 129
John Avatar answered Sep 29 '22 01:09

John