Div styles not working in Outlook Emails

Question

I have created a HTML template for Emails using Div tags.

Its working fine on Gmail, Yahoo.

But Div styles not working in the Outlook.

Following is the code which i have used.

<div style="margin:auto;padding:auto;background-color:#FFFFFF;width:600px;border:0px;">
Testing Email
</div>

I have set div width 600px also make margin and padding auto. so that it will display in the center of the screen.

But its not working like that.

Gmail, Yahoo display email in the center of the screen

Please suggest how can i reslove this issue.

Layout your Template using Tables, which is more efficient way of creating email templates — Red Virus, Jan 04 '15 at 12:40

LiamB · Accepted Answer · 2022-02-23T13:43:38.090

18

Float width and position CSS styles applied to div's do not work in Outlook.

Link Now Dead - https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/ (See table half way down)

This is the primary reason while Tables are still used so heavily in Emails.

edited Feb 23 '22 at 13:43

answered Jan 04 '15 at 12:30

LiamB

18,243
19
75
116

1

Can you update this with a correct link? It seems the article you were referring to has been pushed way off page 1. Thanks! – jsharpe Mar 17 '18 at 13:13
Unfortunately, they've removed the content (At least I can't locate it and that direct link above redirects to the homepage now) – LiamB Mar 18 '18 at 13:02
6

Wayback machine to the rescue! https://web.archive.org/web/20120204041931/https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/ – Sora2455 Feb 27 '19 at 00:17

score 4 · Answer 2 · answered Jan 04 '15 at 12:37

4

I would suggest you to make basic html structure using a table tag.

You can then use "div" tags insde "td" tags.

Email templates are a pain because most of the cool stuf doesn't work :D

answered Jan 04 '15 at 12:37

Matej Žvan

758
4
13

score 2 · Answer 3 · answered Feb 12 '20 at 11:42

Here's the DIV properties compatibility table (taken from www.campaignmonitor.com, see LiamB answer):

Client                  Float   Position  Margin  Width
Outlook 2003 / Express  Yes     Yes       Yes     Yes
Windows Live Hotmail    Yes     No        Yes     Yes
Yahoo! Mail             Yes     No        Yes     Yes
Outlook 2007 / 2010     No      No        Yes     No
iPhone                  Yes     Yes       Yes     Yes
Gmail                   Yes     No        Yes     Yes
Apple Mail 4            Yes     Yes       Yes     Yes
Lotus Notes 6.5 & 7     No      No        No      No

score 1 · Answer 4 · answered Feb 12 '20 at 13:35

1

HTML emails are primarily table-based due to limited div support...mainly with Outlook Windows. You can use divs for some things but I would recommend only using it for mobileOn/mobileOff type classes and certain displays.

answered Feb 12 '20 at 13:35

Richard Clifford

494
3
17

Div styles not working in Outlook Emails

4 Answers4

Linked