emailhtml-emailemail-templates

Can I use position absolute or negative margin in email template?

Can anybody provide me with the code for this design? in the email template, I need to make this design. Text can be changed dynamically. enter image description here

Solution

  • Email clients usually have poor support for properties like position or negative margin values. See:

    However, there’s a popular technique among email developers called “Faux absolute position”. The idea is to use max-height in a parent element to limit the space taken by children element in the flow. You can then position children element using positive margin values or text-align. You can read this article about it.

    <!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:530px; background-color:#fffff5;"><tr><td>
<![endif]-->
<div style="max-width:530px; margin:auto;">
    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:530px; background-color:#fffff5;">
            <tr>
                <td style="padding:0 20px 20px; border:1px solid #eee;">
                    <div style="max-height:17px;">
                        <div style="margin:0 20px; padding:5px 20px; background:#fc2d6a; border-radius:5px;">
                            <p style="margin:0; color:#fff; font:16px/1.5 sans-serif; text-align:center;">
                                You’ve been referred!!!
                            </p>
                        </div>
                    </div>
                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                            <tr>
                                <td style="padding:20px; border:2px dashed #fc2d6a;">
                                    
                                </td>
                            </tr>
                    </table>
                </td>
            </tr>
    </table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->

    This wouldn't work as it is in Outlook on Windows and you’d need to add a VML fallback version.