CODEWITHSUNDEEP
htmlcsshtml-email
Malka S
Malka S

Reputation: 133

Overlapping tables / negative top position in HTML email

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!

Upvotes: 1

Views: 6608

Answers (2)

ryantdecker
ryantdecker

Reputation: 1810

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/

Upvotes: 3

John
John

Reputation: 12193

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

Upvotes: 2

Related Questions