I've been tasked with creating a template for Microsoft Outlook email that involves adding a dynamic image and text from the server onto an existing static background image. I attempted to design it using both divs and tables, utilizing inline CSS and the important attribute in HTML. Unfortunately, I discovered that Outlook does not support certain CSS properties like margins, floats, and positions, causing my layout to always break. Can you provide me with a solution to create the template without encountering layout issues?
Here is a visual representation of how I envision the template looking.
This resource on email client CSS support may also be helpful.
I attempted two different methods for aligning the elements:
Using div:
<div align="left"><img style="padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="staticimage.png " alt=" ">
<h4 style=" font-family: serif; color: rgb(255, 252, 252);">#Some Text#</h4></div>
<h3 style="font-family: -webkit-body !important;font-style: italic;color: #147C6C; margin-top:-55px">Text</h3>
<img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;
width: 731px;height: 500px; margin-top:-150px;margin-left:25px" src="dynamicimage.png">
Using table:
<tr>
<td>
<img style="background-repeat: no-repeat; background-size: cover;font-family: Helvetica, sans-serif, arial !important;width: 731px;height: 500px;" src="staticimage.jpg">
</td>
<td align="center">
<span style="margin-left: -1458px;">
<img style=" padding: 5px; border: 3px solid white; background-repeat: no-repeat; width: 171px; height: 143px;" src="dynamicimage.png " alt=" ">
<span><h4 style=" font-family: serif; color: rgb(255, 252, 252);margin:0px 0px 0px 0px; ">#some text#</h4></span>
</span>
</td>
<td align="center">
<span style="margin-left: -1253px;">
<img style="width: 350px;height: 225px;margin-top: 44px; " src="dynamictext.png " alt=" ">
</span>
</td>
<td>
<h2 style="margin: -5px 0px -55px -877px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">
<strong>Some text</strong>
</h2>
<h3 style="margin:54px 0px -5px -864px;font-family: -webkit-body !important;font-style: italic;color: #147C6C; ">Employee name</h3>
</td>
</tr>