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

StackOverflow https://stackoverflow.com/questions/23106597

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.

Was it helpful?

Solution 2

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.

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top