Why Email Breaks in Outlook, and How to Build So It Does Not

From Outlook 2007 through Outlook 2019 and the classic desktop app on Windows, Microsoft swapped the rendering engine. Earlier versions used Internet Explorer. Newer ones use the layout engine from Microsoft Word. Word was built to lay out printed documents, not web pages, so it does not understand a large part of CSS.

That one decision causes most of the broken emails you have seen. Word drops display: flex and display: grid entirely. It ignores float and position. It does not respect max-width on a div. Background images need special markup or they vanish. So a layout that looks perfect in Gmail and Apple Mail can stack into a single messy column the moment it lands in a Windows inbox.

It helps to know which Outlooks behave this way. The Windows desktop versions (2007 to 2019, plus the classic perpetual app) use Word. Outlook for Mac, Outlook on the web, and the newer Outlook for Windows app render with a real browser engine and behave much more like Gmail. When people say Outlook breaks email, they almost always mean the Word-based Windows desktop client, and it still has a large share of business inboxes.

The web moved to flexbox and CSS grid years ago. Email did not, because Word does not support either. If you build columns with flex and send to Outlook, the columns drop on top of each other and your two-up product grid becomes one tall stack.

The reliable answer is HTML tables. Use a table for structure: one table for the full body, nested tables for rows and columns. A two-column layout is one table row with two cells (td) side by side. It looks dated as a coding style, but Word reads tables correctly because tables are part of the document model it was built for.

A few rules keep tables predictable. Set role="presentation" on layout tables so screen readers skip them. Set cellpadding="0", cellspacing="0", and border="0" on every table. Give the outer table a fixed width, usually 600 to 640 pixels, since that fits the common reading pane. For the modern clients that do support flex, you can layer a responsive enhancement on top, but the table has to be the floor your email stands on.

Three smaller habits cause a surprising share of Outlook bugs.

First, inline CSS. Many email clients strip out or ignore styles in a <style> block in the head, and some strip the head entirely. Outlook is inconsistent here too. Put the styles that must work directly on the element, like <td style="font-size:16px; line-height:24px; color:#222222;">. A <style> block is fine for progressive things like media queries and hover states, but never depend on it for core layout or text styling.

Second, padding instead of margin. Word handles margin poorly and unpredictably, especially on divs and paragraphs. Margin on a div can be ignored, doubled, or applied to the wrong side. Padding on a table cell is solid. So to space things out, put padding on the td, or add empty spacer cells and spacer rows with a set height. Reach for cell padding before you reach for margin every time.

Third, use live text, not text baked into images. Live HTML text stays sharp, reads in dark mode, works with screen readers, and shows even when a recipient blocks images, which many Outlook users do by default. Headlines and body copy as images look fine until images are off and the message goes blank. Keep words as real text. Reserve images for photos and logos, and always set descriptive alt text so the email still makes sense with images turned off.

A few targeted fixes handle the cases tables alone do not cover.

Buttons are a common one. A styled <a> tag with padding often renders with a tiny clickable area in Outlook, because Word only makes the text itself clickable, not the padded box around it. The durable pattern is a bulletproof button: build the button as a small table or use VML so the whole shape is clickable and the background color fills correctly.

Background images need VML too. Outlook ignores CSS background-image, so wrap it in Microsoft's VML markup inside an <!--[if mso]> conditional comment. Those conditional comments are how you feed code to Word-based Outlook only. Other clients see an HTML comment and skip it, so you can also use them to add extra spacing or fallback colors just for Outlook.

Dark mode is the newer headache. Outlook and other clients can invert or shift your colors automatically, which can turn dark text on a transparent background into invisible text. Set background colors explicitly on cells rather than relying on white showing through, test your logo and text on both light and dark, and use the dark mode meta tags and media queries where supported. This is exactly the kind of cross-client detail Mailwright handles by default. It outputs table-based, inline-CSS HTML that you paste straight into Klaviyo or Mailchimp, so the same email holds up in Gmail, Apple Mail, and Word-based Outlook without you hand-patching each one.