The current code I have is below, and I'm probably heavy on divs, but I'll probably wind up getting rid of the excess ones eventually.
Code: Select all
<div id="container" style="margin: 0pt; padding: 0pt; width: 100%; height: 100%; text-align: center;"><!-- Probably unnecessary... -->
<img src="rounded_top.gif"><!-- 600 x 25, top half of rounded rectangle -->
<div id="page" style="border-left: 1px solid #000; border-right: 1px solid #000; margin: auto; padding: 10px; width: 600px; height: auto; text-align: left;">
<div id="header" style="width: 400px; float: left; text-align: center; height: 100px;">
<h1>Email Title</h1>
</div>
<div id="chunk" style="width: 200px; float: right; text-align: left; height: 100px;">
<div style="width: 200px; height: 100px; background-color:#ccc;"></div><!-- Picture place holder -->
</div>
<div id="chunk1" style="width: 100%; height: auto; float: left; clear: both;">
<p>Lots and lots of text and content</p>
<div style="width: 100px; height: 100px; background-color:#ccc; float: right; display: inline;"></div><!-- Picture place holder -->
</div>
<div id="coupon" style="border: 3px dashed black; text-align: center; width: 100%; height: auto; float: left; clear: both;">
<h2>Save 20%!</h2>
<p>
<em>Expires 6/1/08</em><br>
Some text for the coupon
<span style="font-size: 12px;">This coupon prepared for: %FullName%, (%Email%)<br>
One coupon per customer. Only one coupon per transaction. Coupon must be presented at time of purchase.</span>
</p>
</div>
<div id="foot" style="width: 100%; height: auto; float: left; clear: both; text-align: center; margin-top: 10px; font-size: 12px;">
Privacy Policy | Unsuscribe | Change Email<br>
etc
</div>
</div>
<img src="rounded_bot.gif"><!-- 600 x 25, bottom half of rounded rectangle -->
</div>
I need to fix this to get the left/right borders and background-color working properly.
NOTE: The only reason styles are applied locally is that most big email clients don't parse <link> or <style> tags.
-UPDATE:
Apparently, if I add overflow:hidden to #page, it fixes the problem. However, I'm still curious to know why this happens.