Overlapping tables / negative top position in HTML email

Question

Is there an alternative to negative positioning in HTML emails? The image in the second table below is positioned 100px up using negative positioning. I need that image to overlap somewhat with the content above.

<table>
    <tr>
        <td valign="top" width="400" style="padding-right:10px;">
            <p style="color:#575757;font-size:13px;line-height:19px;font-weight:normal;font-family:'Century Gothic'; text-align:justify;">Lorem Impsum</p>
        </td>
       <td><img src="kneeler.jpg" /></td>
    </tr>
</table>

<table>
    <tr>
        <td style="position:relative; top:-100px;"><img src="shoes.jpg" /></td>
        <td valign="top" width="400" style="padding-left:10px;">
            <p style="color:#575757;font-size:13px;line-height:19px;font-weight:normal;font-family:'Century Gothic'; text-align:justify;">Lorem ipsum</p>
        </td>
    </tr>
</table>

I've tried padding-top: -100px; but that did not work. Please help!

That worked! Thank you! But do negative values work in HTML email? — Malka S, Mar 21 '14 at 14:47
I don't think email clients allow negative margin values or any margin values - [Hotmail and Outlook.com Drop Support for Margin](https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin). — Ex-iT, Mar 21 '14 at 14:47
It didn't work. I tested the email. Thanks @Ex-iT I have been using that Campaign monitor guide. — Malka S, Mar 21 '14 at 14:52
Yeah, not too sure about email clients - I always try to keep everything as simple as possible - if it doesn't ft in a simple table I will tell the client no! If you are just trying to get text on top of an image you're better off just using an image with the text on — Pete, Mar 21 '14 at 14:54

score 3 · Answer 1 · edited May 23 '17 at 11:44

3

You can do this by wrapping the element above in a div and setting the height of the wrapper to be less than the actual height of the element. (for example, height:200px if the element is naturally 300px and you want 100px of overlap) The element will overflow the wrapper, but the next element will start where the wrapper ends.

See answer here:How to position an element on top of another element without using position and margin?

And the example: https://jsfiddle.net/acq3ob6y/1/

edited May 23 '17 at 11:44

Community

1
1

answered Aug 27 '15 at 15:35

ryantdecker

1,754
13
14

That doesn't seem to work on Gmail for Android (March 2018). – Aljullu Mar 20 '18 at 13:38
1

Yeah, as many developers will tell you, designing/coding for email is an incredibly hit-or-miss proposition...this is simply one more thing that may work in some email clients. The only consistent behavior in HTML/CSS emails is that nothing is consistent. :-) – ryantdecker Mar 21 '18 at 15:48

score 2 · Answer 2 · edited May 23 '17 at 11:51

Negative values are mostly unsupported in html email. So is CSS position. For webmail at least, this is so that your email doesn't render outside of the desired window. Imagine Gmail with your CSS or email affecting the interface - they've limited the CSS you can use specifically to prevent this.

The only way to accomplish an image overlapping the container is to fake it. See this similar question for an example

Overlapping tables / negative top position in HTML email

2 Answers2