In normal HTML for browsers, making elements overlap is easy.

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:

  • Position isn't supported in many clients, so no position: absolute; or position: relative; and no top, left, right...
  • Negative margins get removed by Gmail and others. So, no negative margins.
  • Using the 'overhang' from an element with overflow: visible; and a width and height that is less than the size of the element's contents doesn't work very well when <img> tags all need explicit heights and widths or where layouts, due to lack of float support and erratic treatment of <div>s, by necessity need to be based on tables most of the time. (that said, if anything is possible, something based on this seems like the most likely option)
  • Nothing involving background images is an option as these are removed in Gmail and others
  • Don't even think of trying to use CSS3 or javascript in a HTML email...

Is there anything that can be reliably used to create overlap between elements in cross-client HTML emails? And/or any way to make an element extend out from its bounding box without affecting the positioning of its neighbours?

For example, suppose you wanted to do something like this (dashed lines and backgrounds showing bounding boxes), where the large image hangs down over the row below rather than pushing it down...

e</div> <div class= html html-email

Edit
Report