Forwarding will always break emails specially in Outlook as it adds it's own code before composing. You can have a forward link on emails which takes you to a page to forward to a friend or you can go with a broken email when it's forwarded. It's harsh I know but there is no way around it.

[gripe]Email is supposed to be a text-only medium. I can concede a need for rich text - the occasional bold or italic - but background pictures are just needless bloat.[/gripe]

Negative margins are in many cases equivalent to position:relative; with negative position, e.g. position:relative; top:-100px, as in Guffa's answer.

I used to pull stunts like this all the time as soon as tables came. Really ugly, and may seriously embarrass any validator you run it trough: overlapping table cells. Works in most browsers though and even without css.

Negative margins get removed by Gmail and others. So, no negative margins.

But in the dark world of HTML email, where the motto is "code like it's 1996" because Outlook uses the rendering engine from MS Word and Gmail removes almost everything, every method for making two elements overlap that I can think of is unsuitable due to poor client support

You can't use negative margin in html email. To mimic this, there are 2 ways to do it, the nested tables way and the more complex rowspan way:

gmail and other mail services are ignoring the negative margin.

You may have noticed your emails looking a little cramped in Hotmail and Outlook.com recently. The culprit? Discontinuation of support for the margin property in these email clients. Rather than honoring your carefully spaced paragraphs and images, Hotmail and Outlook.com are now completely stripping margin from paragraph tags, leaving default values (0 for the top, right and left; 1.35em for the bottom, to be exact) in their place.

Negative values are mostly unsupported in html email. So is CSS position. For webmail at least, this is so that your email doesn't render outside of the desired window. Imagine Gmail with your CSS or email affecting the interface - they've limited the CSS you can use specifically to prevent this.

Yeah, as many developers will tell you, designing/coding for email is an incredibly hit-or-miss proposition...this is simply one more thing that may work in some email clients. The only consistent behavior in HTML/CSS emails is that nothing is consistent. :-)

Would you rather use a friendly drag-and-drop interface rather than coding? Try Passport, the email builder based on MJML!

No, most css doesn't work in emails, stick to tables and images.

If you're trying to use flexbox as a responsive way to adapt your mails in different devices, well there's a framework for that called MJML hope it works for you.

HTML in emails is somehow in a forgotten world and is about lots of years behind us.

There is a lot of variation in styling support among different mail clients

For now though, you're stuck with <table> and CSS2 support for your layouts.

Honestly, even without flexbox support, most of the layout problems would be solved with simple-basic CSS3 support that is standard in all clients.

With every other change I make, I have to test in a dozen clients and make sure it looks fine. Why is there so much variation in email style implementation amongst different clients?

I'm coding an email for a project and man! it's such a pain. Every other client has it's own implementation and supported rules. Some don't allow even simple properties like background-image while some support most advanced rules like media queries

But more so, external style cannot be applied to a subsection of a web page unless they force it into an iframe, which has all sorts of issues of it's own which is why external CSS is usually ignored. Inline CSS is often stripped by the tag strippers who don't want you turning things on or off... and media queries shouldn't even play into it since the layout should be controlled by the page it's being shown inside (for webmail) or the client itself, NOT your mail.

Whilst I realize the artsy fartsy types get a raging chodo over their goofy PSD based layout asshattery

That's what's supported, and is all that is EVER likely to be supported... and even then be DAMNED sure you send multipart with a plaintext copy or a great many mail servers will flat out reject it on the assumption that no legitimate e-mail has any damned business even having HTML in it in the first place!

that garbage has ZERO damned business in an e-mail which is why a great many places use HTML only e-mail as a trigger for spam detection! (if you send multipart as both text/html and text/plain, you're fine)

That's something that has been bugging me too. I mean, it's fine if not everything is supported, but if everyone could agree on what is or should be supported then that would make a huge difference. But until then, it's going to be a struggle.

I've worked with people at companies where this was their only responsibility. Setting up emails for clients, making sure they pass a battery of tests and look great in all browsers and clients. It's an incredible PITA and it's not a set it and forget it thing. Clients can change month to month; spam filters change, etc...

Email is Hard: learn how MJML will help you.

I hate to be the guy who will destroy your day but... Tables. You need to work with nested tables/cells. If you think Gmail is annoying you will cry in agony if you also need Outlook support.Work with the good old HTML from the early 2000's. That's the only way to be sure everything will work as intended.Anything else will mostly result in a horrible mess, broken design and incompatible layouts.

As a conclusion, I’d say that Flexbox in an email unfortunately causes more troubles than it helps solving.

This approach also splits email development for modern email clients and older clients in two. You can use Safari/Chrome to test and develop modern techniques for WebKit-supported clients while using Firefox for your baseline experience for older clients like Outlook.

Remember, even the email clients with better HTML and CSS support have their own individual quirks and still require testing to see what’s possible.

More importantly, using a plain email would save lots of time and effort. As a goal-driven-lazy person, that’s a good enough reason to start experimenting.

They don't look like advertisements. The second the recipient interprets your email as an ad, promotion, or sales pitch—and it does take just a second—its chances of being read or acted upon plummet towards zero. A plain email leads people to start reading it before jumping to conclusions.

They feel more personal. It's no handwritten note, but it's much more personal than an over-designed email with the recipient's first name crammed somewhere inside.

The plain, unstyled emails resulted in more opens, clicks, replies, and conversions, every time.

They're less likely to go into the "Promotions" tab in Gmail (used by ~16% of all email users), for the same reasons above. From my testing, the plain emails typically end up in the Updates tab and some times even in the primary tab. Of course, the text in the email also affects this.

The plain email—which took no time to design or code—was opened by more recipients and had 3.3x more clicks than the designed email.

If you ever had to go through the hair-pulling process of designing emails, then you understand. If you haven’t, here’s why it’s such pain:

Email tools/clients are inconsistent in how they render HTML and CSS. A designed email might look great in Gmail, broken in Outlook, and unreadable in Apple Mail. Half of all emails are opened on mobile devices (according to one study). Email looks good in different clients? Great, now make it work on a 4" screen just as well as on a desktop.

Email require their own flavor of HTML and CSS. Want to have rows or columns in your layout? You'll have to use <table> tags—a method long buried by web developers. There's also no support for external stylesheets, element position styling, and so on...

Embedded CSS: This style is becoming more popular with the rise of mobile and responsive emails. Embedded CSS codes are determined in one place of an email, generally in the <head> section as a <style>. Some email servers still strip the information out of this section, which can cause display problems.

I would try designing your mail-template as "normal" as possible. Tables help a lot for example (yuck).

Although a lot of email development is stuck in the past, that doesn’t mean we can’t modernize our campaigns right along with our websites. Many of these tips can be baked right into your email boilerplate or code snippets, allowing you to create more accessible HTML emails without too much thought.

I hate making newsletters, but absolutely love reading them.

I hate making newsletters, but absolutely love reading them. Because of this, and on a semi-related note (apologies if this is off-topic/not allowed), I am in the process of creating a newsletter directory, allowing users to browse and find newsletters to sign up for.

While it’s not quite completely table-free, I’ve managed to get The Intermittent Newsletter down to a single table—one that’s not even visible to non-Microsoft email clients. Along the way, I made an effort to make The Intermittent Newsletter accessible to more readers.

Use inline styles for everything.

See screenshots of your emails across 90+ apps

The Gmail Android app that comes pre-installed with most new Android phones contains a feature to access non-Google accounts using POP and IMAP. Unfortunately, emails accessed through this setup lack the embedded style (<style>) support as well as the support for background images.

If you have worked with emails before, the idea of placing a script into an email may set off alarm bells in your head! Rest assured, email providers who support AMP emails enforce fierce security checks that only allow vetted AMP scripts to run in their clients. This enables dynamic and interactive features to run directly in the recipients mailboxes with no security vulnerabilities! Read more about the required markup for AMP Emails here.