Currently working on an HTML email with images that need to be overlaid. Utilized a method found at http://jsfiddle.net/sqJtr/, and everything looks great in a web browser. However, when attempting to send it via email, the div tags are ignored and chaos ensues with the images.
<table class="newsletter" border="0" cellpadding="0" cellspacing="0">
<!--MASTHEAD ROW-->
<tr>
<td>
<div id="container">
<!-- LOGO -->
<div id="overlay_logo">
<img src="" width="140"/>
</div>
<!-- MESSAGE FROM THE DEAN -->
<div id="main_image">
<img src="" width="475"/>
</div>
<!-- SIDE GRAPHIC -->
<div id="overlay_sidegraphic"></div>
<!-- HEADLINE -->
<div id="overlay_headline">
<!--DATE-->
<div class="date">31st August 2015</div>
<!--TITLE-->
<div class="title">Congratulations</div>
</div>
<!-- MESSAGE CONTENT -->
<div id="overlay_content">
<div class="message">
<!-- INTRO -->
<b>Dear Staff,</b>
<br />
<!-- CONTENT -->
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam a orci eget pretium. Donec congue sit amet erat et pharetra.
Aliquam erat volutpat. Sed a feugiat quam. Nulla lorem enim, rhoncus quis venenatis ac, pellentesque ut magna. In vitae lectus tempor,
pharetra felis sit amet, fringilla sem. Nunc interdum erat nec tortor efficitur,
eget aliquam lectus malesuada. Nulla neque enim, viverra quis interdum quis, faucibus ac mauris. Fusce lacinia lorem in mollis semper.
<br />
<br />
</div>
</div>
</div>
</td>
</tr>
</table>
To avoid the layout issues in emails, I know tables should replace div tags but unsure how to implement this change while overlaying multiple images. Research led me to solutions using <div> tags which unfortunately didn't work for my case. Seeking guidance on alternative methods. Thank you!