2-Column HTML using DIVs (no print problems)

If you code your multi-column web page wrong, IE and Firefox won’t be able to page break properly for printing.

Seems that if you use

<p id=”asdf”>
the pages won’t print right, if instead you use
<p class=”asdf”>
they will.

Here is what I used for a two-column layout (specifically, in PHPList put this in the Configure section:

<strong>CSS for HTML messages without a template</strong>

<style>

body { margin : 0; padding : 0; border-color : #ffffff; background-color : #ffffff; color : #000000; }

p {text-align:left; font:\’Arial Narrow\’, Arial, Helvetica; font-size:18px; }

div.leftcolumn { left : 0; width : 360px; float:left; margin-left : 10px; margin-top : 0px; color : #000000; padding : 3px; }

div.rightcolumn { left : 380px; top : 40px; /* lower slightly to balance text opposite logo */ width : 300px; float:left; padding-left : 10px; color : #000000; padding : 3px; }

div.content { top : 0px; margin : 0px 360px 0 165px; padding : 3px; color : #000000; }

div.footer { left : 10px; top:auto; width: 98%; margin-left : 0px; margin-top : 20px; color : #000000; background:#FFFFFF; padding : 3px; }

div.page { background-color:#FFF; border:1px solid #959596; text-align:left; width:690px; margin:0px auto; padding:0; }

div.emailfooter { font-size : 11px; font-family: Verdana, Arial, Helvetica, sans-serif; left : 10px; width:680px;  /* Match width of div.page */ z-index: 1; padding: 2px; margin: 2px; }

div.emaillinks a { font-size: 11px; color: #00; background: #FFFFFF; font-style: normal; font-family: verdana, sans-serif; text-decoration: none; } </style>


Posted

in

by

Tags:

Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.