htmlcssemailoutlookhtml-email

How can I position elements in HTML email in outlook

I need to develop HTML code for all the email clients with 3 shapes stacked upon each other as shown in the below image with some content in them. Mailhog Rendered Image

Here is the html code that is working in most of the email clients apart from outlook.

<table role="none" width="100%" align="center" style="background-color: #F1F4F6; font-family:Lato,Trebuchet MS, sans-serif; max-width:600px;" cellpadding="0" cellspacing="0">
    <tbody><tr>
        <td bgcolor="#ffffff" align="center" style="background-color: #F1F4F6; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; position: relative;">
            <div align="center" style="background-color: #0073C4; height: 566px; width:458px; border-radius: 5px; position: relative;">
                 <p style="padding-top: 150px; color: white;"> Container 1</p>
            </div>
            <div align="center" style="background-color: #2F0FFF; height: 171px; width:164px; border-radius: 5px; position: absolute; top: -85px; left: 50%; transform: translateX(-50%);">
                 <p style="color: white;">Image</p>
            </div>
            <div align="center" style="background-color: #8FFFFF; height: 285px; width:512px; border-radius: 5px; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);">
                <p>Container 2</p>
            </div>
        </td>
    </tr>
</tbody>

But when I sent it to my Outlook mail it rendered these vertically one after the other. Outlook Rendered Image

I also tried using tables and margin style to get the desired view. I tried using Margin instead of margin. But nothing is working. Here is the code I used for Outlook.

<table role="none" width="100%" align="center" style="background-color: #F1F4F6; font-family: Lato, Trebuchet MS, sans-serif; max-width: 600px;" cellpadding="0" cellspacing="0">
    <tr>
        <td bgcolor="#ffffff" align="center" style="background-color: #F1F4F6; font-family: Lato, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">
            <table role="none" width="458" align="center" style="background-color: #0073C4; border-radius: 5px;" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center" height="566">
                        <div align="center" style="color: #ffffff;">Container1</div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td bgcolor="#ffffff" align="center" style="background-color: #F1F4F6; font-family: Lato, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">
            <table role="none" width="164" align="center" style="Margin-top: -650px !important; background-color: #2F0FFF; border-radius: 5px; " cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center" height="171">
                        <div align="center" style="color: #ffffff;">Image</div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td bgcolor="#ffffff" align="center" style="background-color: #F1F4F6; font-family: Lato, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">
            <table role="none" width="512" align="center" style="background-color: #8FFFFF; border-radius: 5px; Margin-top: -310px;" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center" height="285">
                        <div align="center" style="color: #000000;">Container2</div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Is there any way to achieve this output in Outlook? If there is, Please help me in solving this. Thanks in advance!

Solution

  • Outlook has limited CSS support, especially when it comes to layering elements on top/bottom of each other. Unless you can get real creative with using table elements to mimic what looks like elements on top of each other, the answer is no. It's not possible to pull this design off in Outlook instances as of today.