Click to Sign Up for a 7 Day Free Trial!

Email Development

Using Ghost Columns to Fix Alignment Problems in Outlook

Email On Acid

Outlook is a notorious problem-child for email developers. One of the most commonly seen problems is that Outlook just can't handle exact widths very well. Responsive templates that are designed with two side-by-side columns (which stack on mobile devices) often end up stacking on Outlook as well. But with no responsive behavior, the columns don't become full width or stack directly on top of each other. Instead, they still align left and right, as they are coded to. Check out the example below to see what I mean.


This problem affects Outlook 2007, Outlook 2010, Outlook 2013 and Outlook 2016 for Windows. Fortunately, there is an easy way to solve this.

We can use the "hybrid" part of fluid hybrid design to constrain these columns so they appear as intended. Hybrid tables are also sometimes called ghost tables, because they are invisible to clients other than Outlook for desktop. By creating a ghost table with two columns, or TDs, we can force Outlook to display the columns side-by-side no matter what. Because other clients can't "see" this code, it won't interfere with responsive behavior. Take a look at the example below to see the structure we'll be building.

Coding ghost columns for Outlook

So, let's take a look at some starting code which would suffer from this problem. If you just want to see the fix already, click here.

I have added some classes to these elements so that you can see the main container, as well as the left and right column tables.

<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto;">
  <tr>
    <td class="main_container">
      <table border="0" cellpadding="0" cellspacing="0" width="450" align="left" class="left_column">
        <tr>
          <td style="padding:0px;border: 1px solid black;">
            Left Column Content
          </td>
        </tr>
      </table>
      <table border="0" cellpadding="0" cellspacing="0" width="150" align="right" class="right_column">
        <tr>
          <td style="text-align:right;padding:0px;border: 1px solid black;">
            Right Column Content
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>


Now we'll add in conditional code that only Outlook will read. This conditional code needs a start and end statement.

<!--[if (gte mso 9)|(IE)]>
Outlook Only Code Here
<![endif]-->


Within the start and end statements, we will open an ordinary HTML table, TR and TD. This is the beginning of our ghost table.

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td width="450">
<![endif]-->


Now we'll close that table cell and open another, in between our two aligned tables.

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


And finally, we'll want to close out the TD, TR and table tags for our ghost table.

<table width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto;">
  <tr>
    <td class="main_container">
      <!--[if (gte mso 9)|(IE)]>
      <table width="600" align="center">
        <tr>
          <td width="450">
          <![endif]-->
            <table border="0" cellpadding="0" cellspacing="0" width="450" align="left" class="left_column">
              <tr>
                <td style="padding:0px;border: 1px solid black;">
                  Left Column Content
                </td>
              </tr>
            </table>
          <!--[if (gte mso 9)|(IE)]>
          </td>
          <td width="150">
          <![endif]-->
            <table border="0" cellpadding="0" cellspacing="0" width="150" align="right" class="right_column">
              <tr>
                <td style="text-align:right;padding:0px;border: 1px solid black;">
                  Right Column Content
                </td>
              </tr>
            </table>
          <!--[if (gte mso 9)|(IE)]>
          </td>
        </tr>
      </table>
      <![endif]-->
    </td>
  </tr>
</table>


That's it! You should now have two tables that line up perfectly in Outlook. You can also see the completed code with responsive behavior on codepen.

That's what I'm naming my next band...

Finally, I wanted to give a shout out to Mike Ragan who first turned me on to ghost columns.

So here I present to you.... THE GHOST COLUMN METHOD!!!!!


Are you testing your emails?

Let us help you make your emails pixel perfect! Start testing today with our 7 Day Free Trial.


About the Author

Geoff Phillips

Geoff Phillips

Half writer, half email builder/fixer and half customer support, Geoff is living his dream in a role that combines his many diverse interests. Code problem or tricky client got you down? Geoff's your man.

Join the Discussion

Hi,

Maybe its a good idea to place in align and valign to the td as well. It helps contents inside the TD to be aligned.

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td width="450" align="left" valign="top" >
<![endif]-->

Cheers
Shameer
This does not work with Outlook 2016, nor do the columns align when testing in a regular browser.
Robert
Hi Robert,

Sorry to hear you're having issues with this, if you want to head over to our forums and start a topic I'd be happy to troubleshoot with you why it's not working.

Cheers
Alex
Alex Ilhan

Leave a Comment