Search code examples
htmlcssemailgmailyahoo-mail

Can I use negative margins or negative positioning for elements in HTML email templates?

I'm creating an HTML email template with a ribbon that I want to move beyond the border of the email window. You can see the code here: https://jsfiddle.net/GEqk7/

To do this, I first used position: relative; and I gave the ribbon a negative position, but position is not well supported by Gmail or Yahoo. I then tried negative margins, but Gmail and Yahoo don't support that either.

Is there a way to have an element positioned at least partially "off screen" in HTML email templates?

Solution

  • Most e-mail clients don't support negative margins in their HTML rendering engines. You will have to use that ribbon image as a background image.