date:20140617

[css-d] Right col jumps to next line

2014-06-17 Thread J.C. Berry

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
titleYour 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
divimg 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_topdiv class=mktEditable/div/td
  td id=email_right_col rowspan=2div
class=mktEditable/div/td
/tr
tr
  td id=email_left_col_bottomdiv
class=mktEditable/div/td
/tr
tr
  td colspan=2 id=email_footer
divAddress 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/

Re: [css-d] Right col jumps to next line

2014-06-17 Thread Chris Rockwell

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
 titleYour 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
 divimg 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_topdiv class=mktEditable/div/td
   td id=email_right_col rowspan=2div
 class=mktEditable/div/td
 /tr
 tr
   td id=email_left_col_bottomdiv
 class=mktEditable/div/td
 /tr
 tr
   td colspan=2 id=email_footer
 divAddress 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/

Re: [css-d] Right col jumps to next line

2014-06-17 Thread Tom Livingston

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
 titleYour 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
 divimg 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_topdiv class=mktEditable/div/td
   td id=email_right_col rowspan=2div
 class=mktEditable/div/td
 /tr
 tr
   td id=email_left_col_bottomdiv
 class=mktEditable/div/td
 /tr
 tr
   td colspan=2 id=email_footer
 divAddress for company/div
   /td
 /tr
   /table
 /div
   /body
 /html

 --


Is this an actual, for-real email? Is this a template from Marketo or
are you creating it?

You are doing far too much with embedded CSS. You should go all
old-school on the table and add all the attributes to the table as
well as td's. I recommend inline styles for text styling and maybe a
little layout tweaking too, but really, html email is not a fun thing.
It is very crude with terrible and variable support for anything
beyond basic table-based construction. Heck, I still use a spacer gif
if I can't fix something any other way.

I do A LOT of html email and still struggle with stuff. Floats are not
well supported at all - if at all - as well as declared margins on
most things. We do a little responsive email work, but that is very
crude as well.

I recommend a service like Litmus or Email On Acid for checking your
email layouts. They also provide tips on correcting issues as well as
optimizations, etc.

litmus.com
emailonacid.com

If you know all this, well...maybe someone else can benefit...

HTH



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
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/

Re: [css-d] Right col jumps to next line

2014-06-17 Thread Tom Livingston

 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;}


As for the issue, Chris is correct. I also noticed, in Chrome, that
reducing the margin-left on #email_right_col to 9 brought them next to
eachother. But... like I explained earlier... I don't think that's a
great idea.

-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
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-d] Right col jumps to next line

Re: [css-d] Right col jumps to next line

Re: [css-d] Right col jumps to next line

Re: [css-d] Right col jumps to next line

4 matches

Site Navigation

Mail list logo

Footer information