---

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.

Reading @Mike_Ragan 's reverse stack codepen (http://t.co/FxfZR8Fn7c) and now I want to name my next band "the ghost column method"

— Geoff Phillips (@geoff_eoa) September 4, 2015

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.