Outlook Ghost Tables & the Fluid Hybrid Layout, Explained

Why Outlook needs special treatment

Outlook on Windows (the classic desktop app) doesn't use a browser engine: it renders email with Microsoft Word. Word never learned modern CSS, so it ignores max-width, display:flex, display:inline-block for layout, and most of what you'd reach for to build responsive columns. Give it <div>s with max-width and it renders them full-width, stacked.

What Word does understand is tables with fixed pixel widths. So the trick is to hand Outlook, and only Outlook, a table, while every other client gets the modern markup.

Conditional comments: talking to Outlook only

Outlook respects Microsoft's old conditional-comment syntax. Anything inside <!--[if mso]> ... <![endif]--> is read by Outlook ("mso" = Microsoft Office) and treated as an ordinary HTML comment, invisible, by every other client.

<!--[if mso]>
  <table role="presentation" width="600"><tr><td>
<![endif]-->
  ...content everyone sees...
<!--[if mso]>
  </td></tr></table>
<![endif]-->

That table exists only for Outlook. It's a "ghost", present in the source, but invisible to the clients that don't need it.

The fluid hybrid pattern

The modern half of the layout uses display:inline-block boxes that are width:100% up to a max-width:

<div style="display:inline-block;width:100%;max-width:300px;
            vertical-align:top;">
  ...column...
</div>

On a 600px-wide screen, two 300px-capped boxes sit side by side. On a narrow phone, they can't both fit, so the second wraps, and the columns stack. No media query required. It's called "fluid hybrid" (or the Campaign Monitor pattern) because it adapts to the available width on its own, and layers the ghost table underneath for Outlook.

The two gotchas

• The inline-block gap. Whitespace between inline-block elements renders as a visible gap. Set font-size:0 on the container and reset it on each column's cell, and the gap disappears.
• Ghost table widths must match. The <td width="..."> values in the ghost table have to equal your column max-widths, or Outlook's columns won't line up with the design everyone else sees.

Don't hand-write it

The pattern is fiddly: matching widths, nesting the conditionals, getting the font-size:0 reset right. Rather than assemble it by hand, generate it: the Outlook ghost table generator builds a fluid-hybrid layout for 1-4 columns with a live preview and copy-paste HTML. Then, before you send, confirm it holds up with the CSS compatibility checker, which flags exactly what Outlook will drop, and read the Outlook CSS guide for the rest of Word's quirks, read our practical Outlook CSS fallbacks guide for border-radius and gradients, and check our responsive email design guide for cross-client media query support.