Re: [css-d] Right col jumps to next line
You need to use inline css with all your code. Don't use div either. Or floats. Think 1999. For help: http://www.emailology.org/ -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of J.C. Berry Sent: Tuesday, June 17, 2014 7:27 PM To: CSS-D Subject: [css-d] Right col jumps to next line 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? snipped __ 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
jun 18 2014 19:10 Hahnel, Fred (DET-MRM) fred.hah...@mrm-mccann.com: You need to use inline css with all your code. Don't use div either. Or floats. Think 1999. For help: http://www.emailology.org/ Good ideas there I’m sure. You can also forego HTML email and just use plain text or Rich Text and just Communicate. Something some people forget is the number one to check off. IF HTML is needed for some good reason give a link to the site. Email should always be relevant and useful for the recipient and not try and to do stuff email was not meant to do. Content, content, content or forget it. I filter all my email and if you goof up one time you’re gone. __ 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
Howdy MiB,
~~~
Wednesday, June 18, 2014, 1:22:55 PM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.
My reply appears here and/or interspersed within your message.
~~~
You can also forego HTML email and just use plain text or Rich Text and just
Communicate.
YES!!! Plain text very much preferred. A lot of HTML e-mail ends up looking
like a 2nd-graders project using magazine ads, scissors, and paste.
G'Jim c):{-
--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com
Savvy ponderable:
If you lend someone $20 and never see that person again, it was probably worth
it.
---
This email is free from viruses and malware because avast! Antivirus protection
is active.
http://www.avast.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
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
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
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
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/
