Layout and accessibility Recommended

Build layout that Outlook can show

Build the outer layout with tables and fixed widths where classic Outlook on Windows needs them, and use modern CSS only as an extra.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Classic Outlook on Windows renders with the Word engine and ignores most layout CSS, such as display: flex, grid and many max-width rules. Use a centred table of about 600 pixels for the frame. Use conditional comments, <!--[if mso]>, for Outlook-only fixes. A framework such as MJML can generate this markup.

Example

<!--[if mso]>
<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0"><tr><td>
<![endif]-->
<div style="max-width:600px; margin:0 auto;">
  <p>Content here.</p>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->

How to check

Send a test to Windows Outlook and a web client. The layout holds in both, with no overlapping or collapsed columns.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers email playbook: https://agentwranglers.se/playbook/email/layout-and-accessibility/layout-tables.