Chip Cullen

April 17, 2012

So I'm still in the throes of some HTML email torture - I mean, work. My latest challenge was coming up with a centered layout that tested well across clients. Surprisingly, a lot of the solutions out there did not seem to test well - and the major problem child was Outlook (surprise surprise). If one layout worked in 2003 or earlier, it didn't work in 2007 & 2010, and vice versa.

So, I basically wanted:

• A fixed width (in this case, 600 pixels, which is considered best practice)
• Centered
• That worked in most clients (you can't win 'em all) - I particularly targeted Outlook, Gmail and Yahoo.

After much trial and error, I came up with this starting point. Basically, it relies on all of the HTML/CSS tricks to achieve a centered layout, all piled on top of each other:

Sorry for the lack of whitespace in the code- you have to strip out a lot of white space in the HTML that goes into email, or you get unwanted spacing creeping into your layout.

You have:

• HTML attributes of align used
• margin: 0 auto; via inline CSS
• text-align:center; on a parent element with text-align: left; on children. And those are applied inline. Fun times.

This has been tested and works in AOL, Mail.app, Gmail, iOS, Lotus Notes 8 & 8.5, Outlook 2000, 2002, 2003, 2007, 2010, Thunderbird & Yahoo Mail. I tested this using Litmus (which rocks!).