Page 1 of 1

Some problems with an HTML/CSS email

Posted: Wed Apr 02, 2008 7:05 pm
by smudge
Hello, I'm currently trying to put together an HTML/CSS email for a client, and am having some trouble with defining the height of a <div> element.
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>
 
 
The problem is that the <div id="page"> element is rendering as only 20 pixels high: padding-top + padding-bottom even though #page contains content.

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.

Re: Some problems with an HTML/CSS email

Posted: Thu Apr 03, 2008 3:59 pm
by matthijs
Probably the shrink-wrapping because of the floating elements. Google for shrink wrap floats css or something and you'll find more info. Basically if a non floated element has child elements which are floated, it collapses. Overflow:hidden is one of the ways to self-clear the element.

Re: Some problems with an HTML/CSS email

Posted: Fri Apr 04, 2008 4:41 pm
by smudge
Ok, thanks. That's good to know for the future :D