Make Elements Overlap In Cross-client Html Emails?

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 engi

Solution 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:

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

Solution 2:

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