Hi J.C.,

You have `float:left` on the right column; removing it will resolve the
issue you're seeing.  Is there another reason why you are using floats in
this table layout?  Also, you close an un-opened div after your <table>.

In the future, it would be helpful if you created a jsfiddle.net with this
code if a link to a live version is not available.

Side note, you will most likely run into cross-client issues if you don't
use inline styles.  I have been using http://premailer.dialect.ca/ to
inline the styles for me.  I believe there are also some grunt/gulp modules
that will do this as well. That combined with
http://htmlemailboilerplate.com/ will give you some pretty solid email
templates.

Chris Rockwell


On Tue, Jun 17, 2014 at 7:26 PM, J.C. Berry <jcharlesbe...@gmail.com> wrote:

> Hello, I have a question about a simple layout here. The width is 660px as
> you can see, with the two columns 405px and 240px respectively. I've zeroed
> out the margins and padding as needed, but the right col still drops down.
> Any ideas?
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
> http://www.w3.org/TR/html4/loose.dtd";>
> <html>
>   <head>
>     <title>Your Email Title</title>
>     <style type="text/css">
>       body{background-color:#d0d0d0;font:14px
> tahoma;padding:0;margin:0;}/*Which font to use be default?*/
>       #emailwrapper{width:660px;margin:0 auto;padding:0;}
>       #email_hdr{height:65px;vertical-align:middle;padding:0;margin:0;}
>       #email_hdr div{vertical-align:middle;padding:0;margin:0;}
>       #email_hdr div img{float:right;}
>       #email_banner_graphic{background-color:#fff;padding:0;margin:0;}
>       #email_left_col_top,#email_left_col_bottom{margin:15px 0 0
> 0;width:405px;float:left;background-color:#fff;padding:0;}
>
>
> #email_right_col{padding:0;width:240px;float:left;background-color:#fff;vertical-align:top;margin:15px
> 0 0 15px;}
>       #email_footer{font:11px
> tahoma;color:#000;text-align:center;padding:0;margin:0;}
>       #email_hdr div,#email_banner_graphic div,#email_left_col_top
> div,#email_left_col_bottom div,#email_right_col div,#email_footer
> div{padding:15px;margin:0;}
>     </style>
>   </head>
>   <body>
>       <table id="emailwrapper">
>         <tr>
>           <td colspan="2" id="email_hdr">
>             <div><img src="http://mysite.com/_logo.png"; id="logo"
> width="152" height="35" /></div>
>           </td>
>         </tr>
>         <tr>
>           <td colspan="2" id="email_banner_graphic">
>             <div class="mktEditable">
>
>             </div>
>           </td>
>         </tr>
>         <tr>
>           <td id="email_left_col_top"><div class="mktEditable"></div></td>
>           <td id="email_right_col" rowspan="2"><div
> class="mktEditable"></div></td>
>         </tr>
>         <tr>
>           <td id="email_left_col_bottom"><div
> class="mktEditable"></div></td>
>         </tr>
>         <tr>
>           <td colspan="2" id="email_footer">
>             <div>Address for company</div>
>           </td>
>         </tr>
>       </table>
>     </div>
>   </body>
> </html>
>
> --
> J.C. Berry, M.A.
> UI Developer
> 619.306.1712(m)
> jcharlesbe...@gmail.com
> http://www.mindarc.com
>
> ------------------------------------------------------------------------------------------------------------------------------------------------
>
> This E-mail is covered by the Electronic Communications Privacy Act, 18
> U.S.C. ?? 2510-2521 and is legally privileged. This information is
> confidential information and is intended only for the use of the individual
> or entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any dissemination, distribution or
> copying of this communication is strictly prohibited.
>
> ------------------------------------------------------------------------------------------------------------------------------------------------
> ______________________________________________________________________
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to