An HTML email centered layout
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
alignused margin: 0 auto;via inline CSStext-align:center;on a parent element withtext-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!).
