We’ve chatted a bit lately about when it’s okay to use div tags in HTML email, especially in regards to layouts. After all, it’s 2011 already and yet static table-based layouts remain the standard for email.

The sad truth is that it isn’t time to pack those tables away – in a recent test, we found that using div tags to create multi-column layouts is still highly unreliable. However, we shouldn’t write divs off altogether, as they can still be useful. Let’s look at what happens when you use div tags to build layouts in your email newsletters.

Building email layouts: A div-isive issue

Our test was simple: first of all, we created a typical multi-column layout using tables, then recreated it using div tags and CSS. In order to recreate the table-based layout, we used some pretty stock-standard CSS properties, including float, position, margin and more.

Once done, we tested the design across a range of popular email clients… And Lotus Notes. For many of us, the results were, well, predictable. Here’s Outlook ’07, with the table-based layout on top, then the div version below:

div tags in Outlook '07

Needless to say, there’s some real craziness going on here – every div tag with the width property applied (either as % or px) has been expanded to fill 100% of the reading pane. Positioning has disappeared. Forget about floats.

However, it wasn’t all doom and gloom. Here are how some of the most popular email clients handled a variety of CSS properties, when applied to div tags:

Common CSS properties used with div for layouts
Client (by popularity) 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

Despite this unreliable behavior, some folks may still find solid reasons to use div tags. For instance, load time optimization – div-based layouts require roughly half as much code as tables to achieve the same result in many email clients. Plus, a lot of these rendering issues are irrelevant in one-column layouts. But from our experience, the main reason why we see HTML emails feature loads of div tags is because the designer was simply trying to save time, by adapting existing web page source code to create an email template. This isn’t a bad thing, but as the chart above shows, simply shrinking a web layout to fit in email clients’ preview panes does not make usually make for a gracefully degradable design.

Don’t use div at all: A common misconception

Now, I was brought into the world of HTML email coding with the assumption that any design with div tags would spontaneously explode at send time. This is incorrect and there are instances where our support team has recommended using them. For example, they can be a good alternative to using br and p tags and can save a lot of inline styling, especially when used to surround bulleted lists or within repeaters.

So the bottom line is that div tags can be great for styling up your email design and maintaining simple layouts, however, they have no place in multi-column layouts or any design that requires the position CSS property. When in doubt, use tables and definitely refer to our ‘CSS support in email’ guide.

  • Tobias

    Nice article – very helpful :)
    Needless to say that Microsofts removing of 3 properties from 2003 to 2007 only produces headshaking.

  • David

    Surprising to see outlook handle divs and css so well. Think i will stick to the table layouts, but thanks for the interesting experiment.

  • artViper

    We also went that path and gave up the div idea pretty quickly. As long as there’s so much hassle with that markup we rather stick to old fashioned tables, just too bad to miss really a few nifty designs through that.

  • Locked-N-Loaded

    Divs can fail in certain circumstances.. tables do not, end of story.

  • Suziam

    Great update Ros, thanks!
    I heard around the grapevine that a couple of companies had been using divs in their emails recently. I thought I missed something, or that I was being one of those ‘grouchy old coders’ by still insisting on tables. Crappy Outlook support is once again still a deal breaker for most.

  • Adam Gerthel

    Perhaps div’s can be useful at times – but those are most likely very seldom occurrences, and if you don’t know exactly when you can use them you’ll end up tearing your hair out and reverting to tables.

    Therefor: Code like it’s ’94!

    And once you’ve mastered that, you can carefully learn the other tricks of the trade. Slowly.

  • Wayne

    Good article but everyone is quick to jump on Outlook as the issue but many large businesses use Lotus Notes and that has no support so until it does the point is mute if you are targeting businesses in your campaigns.

  • Zander

    How does thunderbird stack up in allthis?

  • Dana Whittle

    Outlook 2007 and up use Word (that’s right!) to read HTML documents. WTF is kind of an understatement here…

  • muhammad qamar Shafiq

    thanku…

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free