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

Answer 1

The genius' solution worked in most situation. But for outlook 2007, 2010 and 2013, it didn't work for the rowspan will be deleted.

Answer 2

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="#ffffdffffd">
      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.