html side by side tables in email are forced under in Outlook 2007 and above

Question

I have just run into my first frustration with Outlook breaking my html emails.

I have a container table that is 640 px wide. In it is two 320px tables one align left, one align right. They site side by side in ALL email clients except Word Engined Outlook (2007 and up).

THIS is the important part. I have code to make the containing table become 320px wide when viewed on mobile phone. This forces the two tables to be one on top of the other. This works exactly as planned for mobiles.

But Outlook on a desktop renders the left aligned table, then below it it renders the right hand table below the left but still aligned to the right, creating a big gap beneath the left hand table and a big gap above the right hand table.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
    img 
    {display:block;}
    a 
    {text-decoration:none;}
    a:hover
    {text-decoration: underline !important;}
    td.contentblock p { 
        color:#FFFFFF;
        font-size:16px;
        font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
        margin-top:0;
        margin-bottom:12px;
        padding-top:0;
        padding-bottom:0;
        font-weight:normal;
    }
    td.contentblock p a { 
        color:#e45808;
        text-decoration:none;
    }
    .heading {
        font-size:24px;
        font-weight:bold;
    }
    @media only screen and (max-device-width: 480px) {
         table[class="table"], td[class="cell"] {
              width: 320px !important;
         }
        td[class="footershow"] {
              width: 320px !important;
         }
        table[class="hide"], img[class="hide"], td[class="hide"], br[class="hide"], div[class="hide"] {
              display: none !important;
         }
         img[class="divider"] {
              height: 1px !important;
         }
         img[id="header"] {
              width: 320px !important;
              height: 69px !important;
         }
         img[id="main"] {
              width: 320px !important;
              height: 45px !important;
         }
         img[id="footer"] {
              width: 320px !important;
              height: 43px !important;
         }
        p[class="reminder"] {
            font-size: 11px !important;
        }
        span[class="secondary"] {
            line-height: 20px !important;
            margin-bottom: 15px !important;
            font-size: 13px !important;
        }
    }
    </style>
</head>
<body bgcolor="#e4e4e4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased;width:100% !important;background:#e4e4e4;-webkit-text-size-adjust:none;">

<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#EEEEEE">
<tr>
    <td bgcolor="#EEEEEE" width="100%">

    <table width="640" cellpadding="0" cellspacing="0" border="0" align="center" class="table">
    <tr>
        <td width="640" class="cell" style="color:#FFF;">

        <table class="table" width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td bgcolor="#cc6600" class="contentblock cell" style="color:#FFFFFF;font-size:16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
            <table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="left">
            <tr>
                <td>
                <a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_01.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
                </td>
            </tr>
            </table>
            <table width="320" bgcolor="#cc6600" cellpadding="0" cellspacing="0" border="0" align="right">
            <tr>
                <td>
                <a href="#" target="_blank" title="#" style="text-decoration:none;color:#FFF;"><img src="http://www.example.com/image_02.png" alt="#" width="320" height="167" border="0" style="display:block;" /></a>
                </td>
            </tr>
            </table>
            </td>
        </tr>
        </table>
        </td>
    </tr>
    </table>
    </td>
</tr>
</table>                         

</body>
</html>

If any one could help me find a way to still have my two side by side tables in Outlook, but still have them re-align to one under the other in mobile phones, I would be very appreciative.

score 7 · Answer 1 · answered Dec 12 '14 at 00:02

I have found that you need to allow 25px in between tables in order to prevent Outlook from stacking them like that.

The other solution is to use conditional code for Outlook to wrap each table in a cell of a wrapper table. This means that in Outlook they'll both be on the same row of a table so they can't possibly bump down.

<!--[if (gte mso 9)|(IE)]>
 <table width="640" cellpadding="0" cellspacing="0" border="0">
  <tr>
   <td width="50%">
<![endif]-->

(Left table goes here)

<!--[if (gte mso 9)|(IE)]>
   </td>
   <td width="50%">
<![endif]-->

(Right table goes here)

<!--[if (gte mso 9)|(IE)]>
   </td>
  </tr>
 </table>
<![endif]-->

The (gte mso 9) will target all versions of Outlook 2000 and up, but in actual fact Outlook 2000, 2002 and 2003 render using IE and don't recognise that code, which is why you also use (IE) in the conditional if statement.

I have found that I can get away with leaving a gap of only 4px and it will work. I do like your idea though and will give it a go. Thanks. — Almeister9, Dec 14 '14 at 10:34
This worked for me in all the versions of Outlook I have in Litmus. I just used [if mso]. Nice one! — Rorok_89, Jul 27 '18 at 09:04

score 6 · Accepted Answer · edited May 23 '17 at 11:52

6

The quick answer is to make the widths of the inner tables a few pixels smaller. As it stands, Outlook adds a few pixels in between them causing the 320 + (couple pixels) + 320 > 640.

A more accurate way though is to add mso-table-lspace and mso-table-rspace to reduce the gap. See this example.

edited May 23 '17 at 11:52

Community

1
1

answered Apr 16 '14 at 13:07

John

11,985
3
45
60

3

The mso-table-lspace and mso-table-rspace didn't work on their own. by reducing the image width and the encasing tabel widths from 320px to 315px did work though. I will have to keep experimenting to see how wide I can get away with. I REALLY do wish microsoft would just go away. – Almeister9 Apr 16 '14 at 23:04
@Almeister9 your comment made me laugh..... I wish the same everytime I need to create some emails.... :-D – MeV Jun 13 '16 at 15:58
@Almeister9 - Do you know of any HTML inspector for Outlook? How have you been inspecting the elements, other than just purely trial and error between source code and generating email? – Nicola Jul 20 '16 at 09:37
1

@nicoladeep Most email designers use a tool like [Litmus](https://litmus.com/) or [Email on Acid](https://www.emailonacid.com/) to test their designs across all versions of Outlook (and all other major email clients). Some email service providers like Mailchimp and Campaign Monitor have these services built in, saving you an additional subscription fee. – John Jul 20 '16 at 15:45

html side by side tables in email are forced under in Outlook 2007 and above

2 Answers2