Make elements overlap in cross-client HTML emails?

Question

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...

An element (in this case, an <img>, but not necessarily an image) overlaps other elements (in this case, the row below - but not necessarily a separate row) without pushing them away.

Is there any way to do that without major client compatibility problems?

EDIT: Just found this piece of crazy twisted genius: making table cells overlap using colspans and rowspans. This could be an option, not yet thoroughly tested its cross-client rendering though, any info from prior experience or research is welcome.

---

Assume we're making a newsletter where we can't predict what clients our customers will be using, so we have to support popular mainstream email clients: Outlook, Gmail, Yahoo, Hotmail, Thunderbird, iOS/OSX, Android...

Answer 1

A little late to the conversation, but this similar answer is the technique you are looking for.

Your example is a lot more complex however as you are spanning over both rows and columns. I'm up for the challenge:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr><!-- This row is needed to enforce col widths in Outlook -->
    <td width="100">
    </td>
    <td width="300">
    </td>
    <td width="200">
    </td>
  </tr>
  <tr>
    <td width="400" valign="top" height="80" colspan="2" bgcolor="#bbbbbb">
      Title Here
    </td>
    <td width="200" valign="top" height="120" rowspan="2" bgcolor="#dddddd">
      Image Here
    </td>
  </tr>
  <tr>
    <td width="100" valign="top" height="540" rowspan="2" bgcolor="#cccccc">
      Column<br>...<br>...<br>...
    </td>
    <td width="300" valign="top" height="40" bgcolor="#aaaaaa">
      Heading 1
    </td>
  </tr>
  <tr>
    <td width="500" valign="top" height="500" colspan="2" bgcolor="#eeeeee">
      Content<br>...<br>...<br>...
    </td>
  </tr>
</table>

This is as close as you'll get. You can't make non-rectangles, so the top Header in the body has to be in it's own cell.