Why Your HTML Email Looks Broken in Outlook (and What Classic Outlook Drops)

Classic Outlook for Windows draws HTML email with Microsoft Word's rendering engine, not a browser, and Word ignores much of modern CSS. Microsoft's own reference lists float, position, display, background-image, max-width and min-width as unsupported, along with forms and scripts, and shows animated GIFs as a still first frame. So a template built with flexbox, max-width divs or CSS backgrounds looks fine in Gmail and falls apart in Outlook. The fix is usually a table layout with widths as attributes, not a rebuild.

Sources, read 2 November 2026: Microsoft's Word 2007 HTML and CSS rendering capabilities in Outlook 2007 (archived, but still the engine classic Outlook uses), Microsoft's stages of migration to new Outlook for Windows (updated 23 February 2026), and Can I email support tables.

Which Outlook is the problem

• Classic Outlook for Windows (the desktop app in most offices): Word engine. This is where templates break.
• New Outlook for Windows and Outlook on the web: browser engine, much closer to Gmail.
• Outlook for Mac, iOS and Android: browser-based engines too.

Microsoft says new Outlook is still in the opt-in stage, and that existing classic installs will be supported until at least 2029. If you send to business inboxes, assume a share of readers see the Word version for years.

What classic Outlook drops

From Microsoft's list of unsupported CSS and HTML, the ones that break email most often:

What you used	What happens in classic Outlook	What to do instead
display: flex or grid	Ignored; columns stack or collapse	Table columns, td per column
max-width on a div	Ignored; the div goes full width	A table with width=600
float, position	Ignored	Table cells with align
CSS background-image	Not shown	bgcolor fallback, or VML in conditional comments
Width only in CSS on images	Image shows at its real file size	width attribute on every img
Animated GIF	First frame only	Put the message in the first frame
Forms, buttons, scripts	Not supported	Link to a web page

Two other common causes aren't about CSS at all: an unclosed td or tr (Outlook is less forgiving than a browser), and padding on div or p, which Word gives margins but not padding (padding is only in its full-support group, which includes td). Put padding on the td.

How to fix a template that breaks

1. Paste the HTML into the HTML email checker. It flags flex and grid, CSS variables, background images without Outlook code, position, unclosed table tags and images without widths, and notes whether the file already has Outlook conditional comments.
2. Wrap the body in a 600px table with the width as an attribute, centred with align=center.
3. Rebuild columns as table cells. For responsive stacking on phones, keep the cells and use a media query in the head; Outlook ignores the query and keeps columns.
4. Add width attributes to images, and set display:block on them to remove the small gap some clients add below an image.
5. Inline the styles with the email CSS inliner so they survive clients that drop the head styles.
6. Use conditional comments for the rest. Code inside an if mso comment is read only by classic Outlook, which is where fixed widths and VML backgrounds go.
7. Send a test to a classic Outlook for Windows inbox, plus Gmail and Apple Mail. A checker reads code; only a real client shows the result.

Broken layout isn't the same as junk

A template that renders badly in Outlook still lands where it would have landed. If Outlook is filing your email in Junk, the causes are authentication, reputation and complaints, not CSS; see emails going to junk in Outlook and Microsoft's sender requirements.

Where SimpleVerifier fits

The checker is free and runs in your browser. Before you send, check the list itself: upload it on the verify page, and the first 100 checks are free with a Google sign-in. Pro is $39 a month with the first 100,000 checks a month at full speed, then slower, never cut off. See pricing.