Unfortunately float Left does not work
I searched but not found a solution. My intention is to place the last box in the 2. row. Where is my mistake? Please zoom to 80% in the preview if you use the button "Run code snippet"
<body leftmargin="0" topmargin="6" marginheight="6" marginwidth="6" align="center" class="main" style="cursor: auto;">
<div style="position: relative;">
<div padding="4px" width="150" style="float: left; width: 150px; text-align: center; border: 1px solid black; background-color: white; padding: 4px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="left" cellpadding="4" cellspacing="1" text-align="left" style="width: 150%; margin-top: 4px; margin-left: 1px;">
<tbody>
<tr>
<th align="center" colspan="1">Lorem</th>
</tr>
<tr>
<td align="left">Loren <button>Ipsum</button></td>
</tr>
<tr>
<td align="left">Loren <button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;">
<table align="center" cellpadding="5" cellspacing="0" text-align="left">
<tbody>
<tr>
<th align="center" colspan="6" style="text-align: center;">Lorem ipsum lorem</th>
</tr>
<tr>
<td><input name="val" type="Radio" value="a">ipsum</td>
<td><input name="val" type="Radio" value="b">ipsum</td>
</tr>
<tr>
<td align="center" colspan="6"><button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="clear: both; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="12" cellspacing="12" text-align="center" style="margin-top: 3px;">
<tbody>
<tr>
<th align="center" colspan="2" style="text-align: center;">Lorem</th>
</tr>
<tr>
<td align="left">Lorem Lorem Lorem Lorem Lorem Lorem </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:lightgreen; clear: both; text-align: center; border: 1px solid black; padding: 4px; width: 150px; margin:
0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="2" cellspacing="0" text-align="left" style="margin-top: 4px;">
<tbody>
<tr>
<th align="center" colspan="3" style="text-align: center">I want to be in the second row</th>
</tr>
<tr>
<td><input name="freq_val" type="Radio" value="50">Please</td>
<td><input name="freq_val" type="Radio" value="60">Help</td>
</tr>
<tr>
<td align="center" colspan="3"><button>Thank You</button></td>
</tr>
</tbody>
</table>
</div>
<div style="position: absolute; top: 542px; left: 24px; width: 20px; height: 20px; text-align: center; visibility: hidden; background-color: red; border-radius: 6px;"></div>
<div style="position: absolute; top: 542px; left: 60px; width: 600px; height: 20px; text-align: left; visibility: hidden; background-color: white;">infos</div>
<span class="list-group-item" an_id " style="display: none; position: absolute; top: 720px; border: none;">
</span>
</div>
</body>
You had some clear: both; properties placed wrong, and a missing float: left; :)
<body leftmargin="0" topmargin="6" marginheight="6" marginwidth="6" align="center" class="main" style="cursor: auto;">
<div style="position: relative;">
<div padding="4px" width="150" style="float: left; width: 150px; text-align: center; border: 1px solid black; background-color: white; padding: 4px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="left" cellpadding="4" cellspacing="1" text-align="left" style="width: 150%; margin-top: 4px; margin-left: 1px;">
<tbody>
<tr>
<th align="center" colspan="1">Lorem</th>
</tr>
<tr>
<td align="left">Loren <button>Ipsum</button></td>
</tr>
<tr>
<td align="left">Loren <button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;">
<table align="center" cellpadding="5" cellspacing="0" text-align="left">
<tbody>
<tr>
<th align="center" colspan="6" style="text-align: center;">Lorem ipsum lorem</th>
</tr>
<tr>
<td><input name="val" type="Radio" value="a">ipsum</td>
<td><input name="val" type="Radio" value="b">ipsum</td>
</tr>
<tr>
<td align="center" colspan="6"><button>Lorem</button></td>
</tr>
</tbody>
</table>
</div>
<div class="img-rounded" style="clear: both; float: left; text-align: center; border: 1px solid black; background-color: white; padding: 4px; width: 150px; margin: 0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="12" cellspacing="12" text-align="center" style="margin-top: 3px;">
<tbody>
<tr>
<th align="center" colspan="2" style="text-align: center;">Lorem</th>
</tr>
<tr>
<td align="left">Lorem Lorem Lorem Lorem Lorem Lorem </td>
</tr>
</tbody>
</table>
</div>
<div style="background-color:lightgreen; float: left; text-align: center; border: 1px solid black; padding: 4px; width: 150px; margin:
0px 0px 10px 10px; border-radius: 6px;"><table align="center" cellpadding="2" cellspacing="0" text-align="left" style="margin-top: 4px;">
<tbody>
<tr>
<th align="center" colspan="3" style="text-align: center">I want to be in the second row</th>
</tr>
<tr>
<td><input name="freq_val" type="Radio" value="50">Please</td>
<td><input name="freq_val" type="Radio" value="60">Help</td>
</tr>
<tr>
<td align="center" colspan="3"><button>Thank You</button></td>
</tr>
</tbody>
</table>
</div>
<div style="position: absolute; top: 542px; left: 24px; width: 20px; height: 20px; text-align: center; visibility: hidden; background-color: red; border-radius: 6px;"></div>
<div style="position: absolute; top: 542px; left: 60px; width: 600px; height: 20px; text-align: left; visibility: hidden; background-color: white;">infos</div>
<span class="list-group-item" an_id " style="display: none; position: absolute; top: 720px; border: none;">
</span>
</div>
</body>
Related
we are tryin to make modify an email for making it work in outlook and media# don't seem to work. im out of idea,
this doesn't seem to work to
here the base model i took for outlook specification with css but it don't seems to work
<!--[if mso]>
<style>
.example-class {
/* Outlook-specific CSS goes here. */
}
</style>
<![endif]-->
soo i tried simple test with changing the background color first with a nice looking red
but it doesn't seem to actually do something. i don't realy know what i can do
<!--[if mso]>
<style>
.table {
background-color : red !important;
}
.body {
background-color : red !important;
}
</style>
<![endif]-->
</head>
<body
class="clean-body"
style="
margin: 0 auto;
padding: 0 auto ;
-webkit-text-size-adjust: 100%;
color-scheme: light only;">
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table
background="https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png" width="600" height="auto"
style="
max-width: 600px;
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
vertical-align: top;
min-width: 320px;
margin: 0 auto;
background-image: url('https://uploads-ssl.webflow.com/612d92faee8b9d13af4cd235/61bdeff1d3a394e5d362a8d2_signaturebackground.png'); width:600px; display: block;
background-color : rgb(33, 34, 34);
color-scheme: light only;
width: 100%;
color: #ffffff;
font-family: 'Roboto', sans-serif;
top : -50px;
"
cellpadding="0"
cellspacing="0"
>
<tbody>
<tr>
<td style="min-width: 180px; width: 210px; padding-bottom: 37px;">
<table style="margin: 0; padding: 0">
<tbody>
<tr>
<td
style="
padding-left: 42px;
padding-bottom: 1px;
min-width: 83px;
padding-top: 40px;
padding-right: 0px;
"
>
<table>
<tbody>
<tr>
<td style="min-width: 180px">
<div
style="
font-size: 15px;
font-weight: 800;
line-height: 1;
color:rgb(126, 122, 122);filter: brightness(100);
"
>
Inès AZUELOS
</div>
</td>
</tr>
<tr>
<td>
<div
style="
font-size: 13px;
font-weight: 600;
padding-top: 5px;
padding-left: 1px;
color: #3399ff;"
>
Direction - Assistante
</div>
</td>
</tr>
<tr>
<td style="
padding-top: 16px;
padding-left: 2px;
color:rgb(126, 122, 122);filter: brightness(100);
font-size: 13px;
font-weight: 600;"
>
EICIAM
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="
padding-left: 41px;
padding-bottom: 2px;
padding-right: 0px;
padding-top: 15px;
min-width: 83px;
"
>
<table>
<tbody>
<tr>
<td alt="logo facebook" title="logofacebook" style="padding: 3px; width : 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block;border :0;"/>
</td>
<td alt="logo linkedin" title="logolinkedin" style="padding: 3px; width: 20px; height: 20px;">
<img style="width: 20px; height: 20px; display: block; border :0;"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<!-- --------------------- -->
<td style="padding: 33px 0 0 0; width: 226px; margin-left: 5px ">
<table>
<tbody>
<tr>
<td style="border-left: 1px solid #ffffff67; padding: 7px 0 0 19px;">
<table
style="
font-size: 11px;
color: #212222;
letter-spacing: 0.7px;
"
>
<tbody>
<tr>
<td style="min-width: 170px">
<table>
<tbody>
<tr>
<td alt="phone" title="phone" style="min-width: 19px; padding-top: 2px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td href=""style="color:rgb(126, 122, 122);filter: brightness(100%); padding-top: 5px; padding-left: 10px; font-size: 12px;"> </td>
</tr>
<tr>
<td alt="mail" title="mail" style="padding-top: 13px; width: 20px; height : 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border : 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px; font-size: 12px;">
<a href="" style="color:rgb(126, 122, 122);filter: brightness(100);" > </a>
</td>
</tr>
<tr>
<td alt="web" title="web" style="padding-top: 12px; width: 20px; height: 20px;">
<img src="" style="width: 20px; height: 20px; display: block; border: 0;" />
</td>
<td style="padding-top: 16px; padding-left: 10px;font-size: 12px;">
eiciam.fr
</td>
</tr>
<tr>
<td alt="print" title="print" style="padding-top: 15px;width: 20px; height: 20px; display:inline; border:0;">
<img style="width: 20px; height: 20px; display: block; border :0;" onerror="this.src=';"/>
</td>
<td style="padding-top: 16px; padding-left: 10px">
<a style="color:rgb(126, 122, 122);filter: brightness(100); font-size: 9px" style="color: white;"> N'imprimez que si nécessaire </br> Pensez à l'environnement</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td alt="" title="" style="min-width: 50px; width: 100px; height: 100px; border:0;">
<img src="" style="min-height: 50px; min-width: 50px; width: 100px; height: auto; display: block; border: 0;margin-top: 50px;"/>
</td>
<!-- ------------------------------ -->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></div><![endif]-->
<!--[if IE]></div><![endif]-->
</body>
The media element is not supported. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
The fact is that Outlook uses Word as an editor and rendering engine for message bodies.
How to make email-templates with a fixed-width for Iphone? If a width is longer than viewport - reduce the scale.
Now the issue I am having seems to be possibly with email sizing within Gmail Client on iOS on the iPhone. Although this template seems to look ok in all clients, the result I am getting in Gmail Client on Iphone looks compressed:
Email template rendering in Android:
Email template rendering in IOS(Iphone):
Html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Performance Scorecard</title>
</head>
<body>
<table width="640" border="0" cellpadding="0" cellspacing="3" style="font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px;">
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Hi <span>{FirstName}</span>,</td>
</tr>
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Your Performance Scorecard for the month of <span>{MonthAndYear}</span> is ready!</td>
</tr>
<tr>
<td width="180" align="left" style="width: 180px; border: 1px solid #CACACA; padding: 3px; border-radius: 5px">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" style="width: 180px;">
<tr>
<td colspan="2" style="width: 100%; padding-bottom: 20px; padding-top: 3px; text-align: center;"><img src=cid:logoLR width="100"></td>
</tr>
<tr>
<td style="padding-right: 5px;"><img width="65" height="65" style="border-radius: 50%; overflow: hidden;" src=cid:{imgCId}></td>
<td>
<span style="font-size: 14px; font-weight: 500;">{UserName}</span><br /><span style="font-size: 12px; color:#BDBDBD;">{JobTitle}</span><br /><span style="font-size: 12px; color:#BDBDBD;">{TenantName}</span>
</td>
</tr>
<tr>
<td style="font-weight: bold; font-size: 24px; padding-top: 15px; text-align: center;">
<span>{AverageRating}</span>
</td>
<td style="padding-top: 15px;">
<table cellspacing="0" cellpadding="0" border="0" style="font-size: 14px;">
<tr>
<td style="text-align: right; padding-left: 7px;">{RatingsCount}</td>
<td style="padding-left: 5px;">Ratings</td>
</tr>
<tr>
<td style="text-align: right; padding-left: 7px;">{ReviewsCount}</td>
<td style="padding-left: 5px;">Comments</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 15px;">
<table cellpadding="0" border="0" style="width: 100%;">
<tr>
<td style="text-align: center;"><img width="30" height="30" src=cid:{firstStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{secondStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{thirdStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{fourthStar}></td>
<td style="text-align: center;"><img width="30" height="30" src=cid:{fifthStar}></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="490" align="left" valign="middle" style=" width: 495px; border: 1px solid #CACACA; vertical-align: middle; padding: 3px; border-radius: 5px">
<table border="0" cellspacing="0" cellpadding="0" align="left" style="width: 100%;">
<tr>
<td>
<table cellpadding="0" cellspacing="3" border="0">
<tr>
{blockTemplate}
</tr>
</table>
<table cellspacing="3" cellpadding="0" style="width: 100%;">
<tr>
<td style="border: 1px solid #CACACA; padding: 3px;">
<table cellspacing="0" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
<tr>
<td></td>
<td style="background-color: #95B3D7; border: 1px solid #B4C9E3; text-align: right; padding: 3px 5px; font-size: 11px;">{MonthAndYear}</td>
<td style="background-color: #95B3D7; border: 1px solid #B4C9E3; text-align: right; padding: 3px 5px; font-size: 11px;">Since Go-Live</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Review Requests Sent</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{SurveysSentPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{SurveysSentAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">Review Requests Responded</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{SurveysRespondedPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{SurveysRespondedAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Response Rate</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ResponseRatePastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ResponseRateAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">Online Review Site Redirects</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ReviewRedirectionsPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ReviewRedirectionsAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">Online Reviews Added</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ExternalReviewsAddedPastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #DBE5F1; padding: 3px 5px; font-size: 11px;">{ExternalReviewsAddedAllTime}</td>
</tr>
<tr>
<td style="border: 1px solid #B4C9E3; background-color: #FFFF; padding: 3px 5px; font-size: 11px;">Conversion Rate</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ConversionRatePastMonth}</td>
<td style="text-align: right; border: 1px solid #B4C9E3; background-color: #FFF; padding: 3px 5px; font-size: 11px;">{ConversionRateAddedAllTime}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
{blockComments}
<!-- end main -->
<tr>
<td colspan="2" style="padding-bottom: 5px; text-align: left;">Please click on this link to view your complete scorecard.</td>
</tr>
</table>
</body>
</html>
I can't make border-left all for all rows.
Is it possible without CSS?
style="border-left: 1px solid #000;">
This should be in all rows, but it's not. What am I doing wrong?
<p style="border-bottom: 1px solid #000; color: -internal-quirk-inherit;"> </p>
<table style="background-color: white; font-family: lato; text-align: left; color: #000000; font-size: 14px; line-height: 21px; padding: 10px; height: 42px;">
<tbody>
<tr style="height: 21px;">
<td style="width: 100px; padding-right: 50px; padding-left: 50px; text-align: center; height: 42px;" rowspan="4">
<p>
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/JEMIOL.png" width="100px" />
</p>
<p>
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/FACEBOOK.png" width="25px" />
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/INSTAGRAM.png" width="25px" />
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LINKEDIN.png" width="25px" />
</p>
</td>
<td style="width: 19px; height: 42px;" rowspan="4">
<p style="border-left: 1px solid #000;"> </p>
</td>
<td style="padding-top: 1px; padding-bottom: 1px; font-weight: bold; width: 344px; height: 1px;" colspan="4">DAMIAN DĄBROWSKI</td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 10px;" colspan="4">ADMINISTRATOR STRONY INTERNETOWEJ</td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 21px;" colspan="4"><a style="color: #000000; text-decoration: none;" href="-">-</a></td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 10px;" colspan="4"><a style="color: #000000; text-decoration: none;" href="-">-</a></td>
</tr>
</tbody>
</table>
<p style="border-top: 1px solid #000; color: -internal-quirk-inherit;"> </p>
Right now you only have border on the P tag
You mean
<td style="width: 19px; height: 42px; border-left: 1px solid #000;" rowspan="4">
<p style="border-bottom: 1px solid #000; color: -internal-quirk-inherit;"> </p>
<table style="background-color: white; font-family: lato; text-align: left; color: #000000; font-size: 14px; line-height: 21px; padding: 10px; height: 42px;">
<tbody>
<tr style="height: 21px; ">
<td style="width: 100px; padding-right: 50px; padding-left: 50px; text-align: center; height: 42px;" rowspan="4">
<p>
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/JEMIOL.png" width="100px" />
</p>
<p>
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/FACEBOOK.png" width="25px" />
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/INSTAGRAM.png" width="25px" />
<img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LINKEDIN.png" width="25px" />
</p>
</td>
<td style="width: 19px; height: 42px; border-left: 1px solid #000;" rowspan="4">
<p> </p>
</td>
<td style="padding-top: 1px; padding-bottom: 1px; font-weight: bold; width: 344px; height: 1px;" colspan="4">DAMIAN DĄBROWSKI</td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 10px;" colspan="4">ADMINISTRATOR STRONY INTERNETOWEJ</td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 21px;" colspan="4"><a style="color: #000000; text-decoration: none;" href="-">-</a></td>
</tr>
<tr style="height: 1px;">
<td style="padding-top: 1px; padding-bottom: 1px; width: 344px; height: 10px;" colspan="4"><a style="color: #000000; text-decoration: none;" href="-">-</a></td>
</tr>
</tbody>
</table>
<p style="border-top: 1px solid #000; color: -internal-quirk-inherit;"> </p>
I'm trying to print a page for which the fiddle is here http://jsfiddle.net/3J8TD/7/show/. The issue is, it is not aligned to center and it is not printing the header in every page. Look at this screenshot.
HTML:
<div style="" class="invoice-parent">
<div class="logo-container">
<div class="float-left"><img width="115" height="86" src="http://fc06.deviantart.net/fs70/i/2010/131/5/8/Dummy_company__Sample_logo_PSD_by_SolidSilver.jpg" ></div>
<div style="margin-top: 35px" class="float-left"><h1>Sample HEALTHCARE</h1></div>
</div>
<br clear="all" style="margin: 60px;">
<div class="left-address">
<u>C&F</u>: 21A/3, XXXXXX Street,<br>
<div style="margin-left:30px">
Collectorate,<br>
Abccde-324245,<br>
Qds dfs.<br>
Contact no. +91- 999999999999.<br>
Email: info#sampledomain.ext
</div>
</div>
<div class="right-address">
<u style="padding-right: 25px;">Corporate office:</u>
<div class="float-right">
78,8th Cross st,<br>
OMR,Koppasa,<br>
Chansoi -224 097.
</div>
</div>
<br clear="all">
<div id="bill_type">INVOICE</div>
<hr>
<div id="tin_cst_dll">
<span id="id-center">CST: 1085914</span>
</div>
<span style="margin-top: -16px;" class="float-left" id="id-left">TIN: 33893767761</span>
<span style="margin-top: -16px;" class="float-right" id="id-right">DL: TRT 2605/20B/2436/21B</span>
<hr>
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="invoice-related">
<tbody><tr>
<td valign="top">
To: <strong id="to_name">Peter Agency</strong>,<br>
<div id="to_addresses">No.4, Fernanderz lane,<br>
Pandy street,<br>
Hobai - 982198. 0782-4379540
</div>
<strong>
<div id="customer_tin" class="float-left">Tin : 33893767754</div>
<div id="customer_dl" style="text-align: right;" class="float-right">DL no. : TRT 2605/20B/5342/21B</div>
<strong>
</strong></strong></td>
<td valign="top">
<div class="float-left" id="invnum"></div> <div class="float-right">Date: 12-07-2014</div><br>
</td>
</tr>
</tbody></table>
<div id="replacement_period" style="visibility: hidden;">Product Replacement for the period 01-03-2014 to 31-03-2014</div>
<table width="100%" border="1" align="left" cellspacing="0" cellpadding="0" class="invoice-related">
<tbody><tr>
<th valign="top">
S.no.
</th>
<th valign="top">
Product name
</th>
<th valign="top">
Packing
</th>
<th valign="top">
Batch no.
</th>
<th valign="top">
MFG Date
</th>
<th valign="top">
EXP date
</th>
<th valign="top">
MRP
</th>
<th valign="top">
Qty
</th>
<th valign="top" id="pts_head">
PTS
</th>
<th valign="top" id="amount_head">
Amount
</th>
</tr>
<tr class="item-row">
<td valign="top">
<div style="" class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div><div class="sl_no">1</div>
</td>
<td valign="top">
CLOPS-75
</td>
<td valign="top">
<div class="packing">12</div>
</td>
<td valign="top">
<div class="batch">CL75</div>
</td>
<td valign="top">
<div class="mfg_date">06/2006</div>
</td>
<td valign="top">
<div class="exp_date">06/2022</div>
</td>
<td valign="top">
<div class="cost">575</div>
</td>
<td valign="top">8</td>
<td valign="top">
<div class="pts">414.00</div>
</td>
<td valign="top">
<div class="price">3312.00</div>
</td>
</tr><tr class="item-row"> <td valign="top"> <div style="" class="delete-wpr"><a class="delete" href="javascript:;" title="Remove row">X</a></div><div class="sl_no">2</div></td> <td valign="top">CLOPS-A </td> <td valign="top"> <div class="packing">12</div> </td> <td valign="top"> <div class="batch">CLA</div> </td> <td valign="top"> <div class="mfg_date">06/2006</div> </td> <td valign="top"> <div class="exp_date">06/2022</div> </td> <td valign="top"> <div class="cost">575</div> </td> <td valign="top">2</td> <td valign="top"> <div class="pts">414.00</div> </td> <td valign="top"> <div class="price">828.00</div> </td> </tr>
<tr class="item-calc">
<td class="blank vishide" colspan="8">By Cheque or Cash or DD.</td>
<td class="total-line balance">Subtotal</td>
<td class="total-value blank-value"><div id="sub_total">4140.00</div></td>
</tr>
<tr class="item-calc">
<td style="visibility: visible;" class="blank vishide" colspan="8">
Amount in words: <span id="number_in_words">Four thousand three hundred and forty seven rupees only </span>
</td>
<td class="total-line balance">Vat (5%)</td>
<td class="total-value blank-value"><div id="vat">207.00</div></td>
</tr>
<tr class="item-calc">
<td class="blank blank-bottom" colspan="8"> </td>
<td class="total-line balance">Grand Total</td>
<td class="total-value blank-value"><div id="grand_total">4347.00</div></td>
</tr>
</tbody></table>
<br clear="all">
<br clear="all">
<div id="tandc">
<u><b>Terms & Conditions</b></u>
<ul>
<li>All disputes subject to Chanso Jurisdiction only.</li>
<li>Certified that the particulars given above are true and correct.</li>
<li>And the amount indicated represents the price actually charged. </li>
<li>Cheques are subject to realisation for Aura Healthcare.</li>
</ul>
</div>
<div id="aura-signature">
For Sample Healthcare,<br><br><br>
<b>Authorised</b> <b>signatory.</b>
</div>
</div>
CSS:
#media print {
body * {
visibility: hidden;
}
div.invoice-parent, div.invoice-parent * {
visibility: visible;
}
div.invoice-parent {
left: 0;
top: 0;
position: absolute;
}
}
body { font-family: "Trebuchet MS","Helvetica","Arial","Verdana","sans-serif"; }
div.invoice-parent { width: 80%; margin: 0 auto; }
div.logo-container { width: 63%; margin: 0 auto; }
div.left-address { float: left; font-size: 15px;}
div.right-address { float: right; font-size: 15px;}
div#to_addresses { margin-left:30px; }
div#replacement_period { font-weight:bold; margin: 10px 0 10px 0; text-align: center; }
div#bill_type { font-size: 15px; font-weight: bold; margin: 20px; text-align: center; }
div#tandc { float: left; font-size: 12px; margin-top: 10px; width: 500px; }
div#aura-signature { margin-top:30px; float:right; }
hr { color: #4B78BB; margin: 20px 0;}
h1 { font-size: 35px; }
.float-left { float: left; }
.float-right { float: right; }
div#tin_cst_dll { left: 50%;
text-align: center;
top: 50%; }
span#id-center { margin:0 auto }
table.invoice-related { border-collapse: collapse; font-size: 13px;}
table.invoice-related td, table.invoice-related th {
border: 1px solid #000000;
padding: 5px;
}
table.invoice-related tr.item-calc {
height: 32px;
border-left: 1px solid #fff;
}
table.invoice-related td.blank {
border: 0 none;
}
table.invoice-related td.blank-value {
border-left: 0 none;
}
table.invoice-related td.blank-bottom {
border-bottom: 1px solid #FFFFFF;
}
table.invoice-related td.total-line {
border-right: 0 none;
text-align: right;
}
textarea { border: 0; overflow: hidden; resize: none; }
input.qty { border: 0 none; width: 40px; }
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
input.qty:hover, input.qty:focus { border: 0 none; overflow: hidden; resize: none; background-color: #EEFF88;}
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
I tried giving various styles for both the parent and child divs. And for priting the header on every page, i tried giving the header fixed. But the logo is overlapping the content from second page. Any kind of help on this is appreciated. Please help.
Note: Please check the print preview of http://jsfiddle.net/3J8TD/7/show/ and not the HTML.
Make some changes in your code,
Decrease the top margin of div to 25px and remove the margin of <h1>
<div style="margin-top: 25px" class="float-left">
<h1 style="margin: 0">Sample HEALTHCARE</h1>
</div>
Add overflow:hidden; to div.logo-container and make the width: 100%
div.logo-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
Check this Demo
Actual View is Here http://jsfiddle.net/amoljawale/3J8TD/8/show/
I'm creating an e-mail template to send out but for some reason, I am unable to create two simple columns in the footer area.
Layout:
Code:
<div style="width: 100%; height: 100%;">
<table style="margin: 0px auto 0px auto; padding: 20px 20px 20px 20px; font: normal 10.5px; color: #777777; width: 100%; height: 100%;" align="center">
<tbody>
<tr>
<td>
<table class="content" style="background: none repeat scroll 0% 0% #FFFFFF; box-shadow: 0px 1px 2px rgba; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<thead>
<tr style="display: inline-block; width: 100%; background: #1F1F1F;" bgcolor="#1F1F1F">
<td style="width: 100%;" align="left" valign="middle">
<h1 style="padding: 15px 15px 15px 15px; color: #FFFFFF;">Test</h1>
</td>
<td style="border-left: 1px solid #FFFFFF;" align="right">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-decoration: none; color: #ffffff; text-align: center; padding: 15px 15px 15px 15px; border-bottom: 1px solid #FFFFFF; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px;">test</td>
</tr>
<tr>
<td style="text-decoration: none; color: #ffffff; text-align: center; padding: 15px 15px 15px 15px; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px;">test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<h4 style="color: #27ccc0; text-align: center; padding: 15px 15px 0px 15px;"> </h4>
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
</table>
How do I modify the above code to create two simple columns in the footer area, that is still within the e-mail's container?
You should make simple structure of html,
Don't make table in table. You can use rowspan. HTML <th> rowspan Attribute
cells in thead tag, recommend to use th tag HTML <thead> Tag
Don't use this style display:inline-block; on tr tag
Put color style on tr tag if cells doesn't have different color
<div style="width: 100%; height: 100%;">
<table class="content" style="background: none; box-shadow: 0px 1px 2px rgba; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<thead>
<tr style="width: 100%; background: #1F1F1F;color: #FFFFFF;">
<th style="width: 100%;" align="left" valign="middle" rowspan=2>
<h1 style="padding: 15px 15px 15px 15px;">test</h1>
</th>
<th style="border-left: 1px solid #FFFFFF;border-bottom: 1px solid #FFFFFF;text-decoration: none;text-align: center; padding: 15px 15px" align="right">
test
</th>
</tr>
<tr style="width: 100%; background: #1F1F1F;color: #ffffff; ">
<th style="border-left: 1px solid #FFFFFF;text-decoration: none; text-align: center; padding: 15px 15px" align="right">
test
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background: red;" colspan="2"> </td>
</tr>
<tr>
<td style="background: red;" colspan="2"> </td>
</tr>
<tr>
<td style="background: red;" colspan="2">
<h4 style="color: #27ccc0; text-align: center; padding: 15px 15px 0px 15px;"> </h4>
</td>
</tr>
<tr>
<td style="background: red;" colspan="2"> </td>
</tr>
</tbody>
<tfoot>
<tr style="width: 100%; background: #1F1F1F; color: #ffffff;">
<td>test</td>
<td>test</td>
</tr>
</tfoot>
</table>
</div>
jsfiddle