I'm trying to align 3 text boxes horizontally, would love some advice/help!
These should all be in a row however it is stacking in a horizontal manner.
I belive it has something to do with the td and table tags.
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<tbody>
<td align="left" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
<a href="" style="color:#ffffff; text-decoration:none">
<table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<tbody>
<td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Repayment Calculator</td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<td align="middle" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
<a href="" style="color:#ffffff; text-decoration:none">
<table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Borrowing Power Calculator</td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<tbody>
<td align="right" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
<a href="" style="color:#ffffff; text-decoration:none">
<table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<tbody>
<td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Property Report</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<tbody>
<td align="left" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px; width:33%;">
<a href="" style="color:#ffffff; text-decoration:none">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<tbody>
<tr>
<td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Repayment Calculator</td>
</tr>
</tbody></table>
</td>
<td align="left" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px; width:33%;">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<tbody>
<tr>
<td align="middle" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
<a href="" style="color:#ffffff; text-decoration:none">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<tbody>
<tr>
<td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Borrowing Power Calculator</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
<td style="width:33%;">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<tbody><tr>
<td align="right" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
<a href="" style="color:#ffffff; text-decoration:none">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<tbody>
<tr>
<td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Property Report</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
Related
I'm trying to align this text and button but I can't manage to do it. I want them to be on the same row no matter the length of the text.
If you need the CSS styling please let me know.
<div style="float: left; width: 100%;" class="sapMktBlock">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td width="640" align="center" style="width: 640px; min-width: 640px;" class="wrapto100pc">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto100pc">
<tbody>
<tr>
<td align="center" style="">
<table bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" style="min-width: 100%;" width="100%" role="presentation">
<tbody>
<tr>
<td align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="font-size: 0; direction: ltr;">
<!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="100%" dir="ltr"><tr><td valign="middle"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> DONE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> Lorem ipsum, lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td align="center" valign="middle" style="font-size:0;"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> STOPE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size: 0px;" class="nomob"> </td>
</tr>
</tbody>
</table>
</div>
I think for your requirement we would need to make some changes in the structure of your table. we need to keep button and text in the same and with different s.
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size: 0px;" class="nomob"> </td>
<td width="640" align="center" style="width: 640px; min-width: 640px;" class="wrapto100pc">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto100pc">
<tbody>
<tr>
<td align="center" style="">
<table bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" style="min-width: 100%;" width="100%" role="presentation">
<tbody>
<tr>
<td align="center" valign="middle" style="padding: 0px 0px 0px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="font-size: 0; direction: ltr;">
<!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="100%" dir="ltr"><tr><td valign="middle"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr width="320" style="max-width:320px">
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="320" align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr width="320">
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> DONE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td width="160" align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> Lorem ipsum, lorem ipsum Lorem ipsum, lorem ipsum Lorem ipsum, lorem ipsum </td>
<td width="160" align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td align="center" valign="middle" style="font-size:0;"><![endif]-->
<div style="direction: ltr; max-width: 320px; vertical-align: middle; display: inline-block;" class="wrapto100pc">
<table width="320" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc" dir="ltr">
<tbody>
<tr>
<td align="center" valign="middle" class="mobheightclear">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle" style="padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px;" class="BDpad">
<table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: 'Arial Black', Arial, Gadget, sans-serif; font-weight: 900; font-size: 32px; line-height: 30px; color: #000000; " class="textcenter">
<a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none;"> STOPE <br> </a>
<a style="color: #000000; text-decoration: none;" target="_blank" href="" rel="noopener noreferrer">
<br> </a>
</td>
</tr>
<tr>
<td align="left" style=" padding: 0px 0px 10px 0px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #000000; " class="textcenter"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum </td>
</tr>
<tr>
<td align="center" style="padding: 10px 0px 10px 0px;" class="textcenter">
<table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">
<tbody>
<tr>
<td>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner" style="width: 210px; min-width: 210px;">
<tbody>
<tr>
<td bgcolor="#f8f3e8" align="center" style=" padding: 9px 12px 9px 12px; border: 1px solid #f8f3e8; color: #000000; font-size: 14px; line-height: 16px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; ">
<a target="_blank" href="" style="color: #000000; text-decoration: none; display: block;" rel="noopener noreferrer"> Shop them all </a> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size: 0px;" class="nomob"> </td>
</tr>
</tbody>
Try above snippet. It might work for you. I have made few changes in structure of table.
I am creating a webpage and I have 99% of the page done. For some reason, I can't figure out the HTML/CSS part of one minor feature. My design looks like this right now(attachment titled before picture):
before picture
I want it to look like this (attachment titled after picture). after picture
As you can see, I have almost everything done, I just need to add a small grey box that says "Feature Presenter 1" and so forth above the picture but I can not figure out what the HTML/CSS should be. Can someone please modify my HTML/CSS code below so that it matches the after picture? Please someone help me, I am so close to completing the project. Thank you so much
The HTML is below:
<tr>
<td align="center" valign="top" bgcolor="#ffffff" style="background-color:#ffffff;"><table width="700" border="0" cellspacing="0" cellpadding="0" align="center" style="width:700px;" class="em_wrapper">
<tr>
<td width="18" style="width:18px;" class="em_side10"> </td>
<td align="center" valign="top"><table width="668" border="0" cellspacing="0" cellpadding="0" align="center" style="width:668px;" class="em_wrapper">
<tr>
<td align="center" valign="top"><table width="328" border="0" cellspacing="0" cellpadding="0" align="left" style="width:328px;" class="em_wrapper">
<tr>
<td align="center" valign="top"><table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tr>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" height="189" style="height:189px;border: solid 2px #4d4d4d; display:block; border-top-left-radius:5px; border-top-right-radius:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/026696a00d07148ec092a60c0cd8b8d3.png" width="145" alt="" height="163" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:163px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="12" style="width:12px;" > </td>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #4d4d4d; display:block; border-top-left-radius:5px; border-top-right-radius:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr>
<td height="189" style="height:189px;" align="center" valign="bottom"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/787e8651d36187721fdec8615b8e4463.png" width="145" alt="" height="159" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:159px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tr>
<td align="center" valign="top" class="em_ptop"><table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tr>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" height="189" style="height:189px;border: solid 2px #4d4d4d; display:block; border-top-left-radius:5px; border-top-right-radius:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr>
<td height="189" style="height:189px;" align="center" valign="bottom"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/1c43c6297227649ba26e611381191ef9.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="12" style="width:12px;" > </td>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" height="189" style="height:189px;border: solid 2px #4d4d4d; display:block; border-top-left-radius:5px; border-top-right-radius:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr>
<td height="189" style="height:189px;" align="center" valign="bottom"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/887a206a411d8ffd17674ffda4b9a939.png" width="145" alt="" height="157" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:157px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="14" style="width:14px;" class="em_side10"> </td>
</tr>
</table></td>
</tr>
<!-- //four column section -->
THE CSS is below:
<style type="text/css">
body { margin: 0; padding: 0; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; }
img { border: 0 !important; outline: none !important; }
td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }
.ExternalClass * { line-height: 100%; }
.em_defaultlink a { color: inherit !important; text-decoration: none !important; }
.em_black a { text-decoration: none; color: #000000; }
.em_white a { text-decoration: none; color: #ffffff; }
.em_blue a { text-decoration: none; color: #0a75b1; }
.em_grey a { text-decoration: none; color: #4d4d4d; }
.em_g_img + div { display: none; }
#media only screen and (min-width:481px) and (max-width:667px) {
.em_main_table { width: 100% !important; }
.em_wrapper { width: 100% !important; }
.em_hide { display: none !important; }
.em_full_img { width: 100% !important; height: auto !important; }
.em_full_img img { width: 100% !important; height: auto !important; }
.em_side10 { width: 10px !important; }
.em_ptop { padding-top: 20px !important; } /* Padding Left Right Bottom */
.em_h20 { height: 20px !important; font-size: 1px!important; line-height: 1px!important; }
.em_w300 { width: 320px !important; }
.em_w280 { width: 320px !important; }
.em_font_18 { font-size: 27px !important; line-height: 31px !important; }
}
#media screen and (max-width: 480px) {
.em_main_table { width: 100% !important; }
.em_wrapper { width: 100% !important; }
.em_hide { display: none !important; }
.em_full_img { width: 100% !important; height: auto !important; }
.em_full_img img { width: 100% !important; height: auto !important; }
.em_side10 { width: 10px !important; }
.em_side_10 { width: 10px !important; }
.em_ptop { padding-top: 20px !important; } /* Padding Left Right Bottom */
.em_h20 { height: 20px !important; font-size: 1px!important; line-height: 1px!important; }
.em_font_18 { font-size: 18px !important; line-height: 23px !important; }
.em_w300 { width: 300px !important; } /* update the N number as per width */
.em_w280 { width: 300px !important; }
.em_w146 { width: 146px !important; }
.em_aside25 { padding: 0px 25px !important; }
u + .em_body .em_full_wrap { width: 100% !important; width: 100vw !important; }
}
</style>
I don't know what are you trying to do there. I can tell you it is not the right way to do it. Please try to implement Bootstrap. Right now I'm giving you the code you need for the sack of your question.
<tr>
<td align="center" valign="top" bgcolor="#ffffff" style="background-color:#ffffff;"><table width="700" border="0" cellspacing="0" cellpadding="0" align="center" style="width:700px;" class="em_wrapper">
<tr>
<td width="18" style="width:18px;" class="em_side10"> </td>
<td align="center" valign="top"><table width="668" border="0" cellspacing="0" cellpadding="0" align="center" style="width:668px;" class="em_wrapper">
<tr>
<td align="center" valign="top"><table width="328" border="0" cellspacing="0" cellpadding="0" align="left" style="width:328px;" class="em_wrapper">
<tr>
<td align="center" valign="top"><table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tr>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f; display:block; "><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr><td align="center" valign="top" bgcolor="#9e9f9f" style="background-color:#9e9f9f; color:#fff;">Feature Presenter 1<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table></td></tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/026696a00d07148ec092a60c0cd8b8d3.png" width="145" alt="" height="163" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:163px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="12" style="width:12px;" > </td>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f; display:block; "><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr><td align="center" valign="top" bgcolor="#9e9f9f" style="background-color:#9e9f9f; color:#fff;">Feature Presenter 2<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table></td></tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/787e8651d36187721fdec8615b8e4463.png" width="145" alt="" height="159" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:159px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tr>
<td align="center" valign="top" class="em_ptop"><table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tr>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f; "><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr><td align="center" valign="top" bgcolor="#9e9f9f" style="background-color:#9e9f9f; color:#fff;">Feature Presenter 3<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table></td></tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/1c43c6297227649ba26e611381191ef9.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="12" style="width:12px;" > </td>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f; "><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr><td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#9e9f9f; color:#fff;">Feature Presenter 4<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table></td></tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/887a206a411d8ffd17674ffda4b9a939.png" width="145" alt="" height="157" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:157px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="14" style="width:14px;" class="em_side10"> </td>
</tr>
</table></td>
</tr>
<!-- //four column section -->
SOLVED: Needed to declare a height on the main image that is nested in the table.
QUESTION: I have two tables that I'm trying to stack on top of one another in an html email but am getting a gap between them in Outlook 2016 only. The red box should touch the grey horizontal line. See picture below. All other version of Outlook are good. I've removed cell padding, borders, and spacing from all tables so I'm at a loss on this one. I also have this table aligned top. Any tricks to getting this to work in MSO 2016?
<table align="right" width="190" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; border-collapse:collapse;" bgcolor="#6e7171">
<tr>
<td align="center" width="1">
<!-- margin SPACER-->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
<!-- /margin SPACER-->
</td>
<td align="center" bgcolor "#6e7171" class="hideMobile" width="188" align="left" class="outlookpadding" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
<table class="hideMobile" bgcolor "#6e7171" align="center" width="188" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; border-collapse:collapse; margin: 0 auto;">
<tr>
<td align="center">
<table width="188" cellpadding="0" class="deviceWidth" cellspacing="0" border="0" bgcolor="#ffffff" align="center" style="border-collapse: collapse;">
<tr>
<td>
<a target="_blank" href="#"><img src="images/laptop.jpg" alt="Using laptop trackpad" width="190" style="display: block; width: 190px; " align="center"></a>
</td>
</tr>
<tr>
<td class="showMobile hideyahoo" valign="top" align="right" bgcolor="#ffffff" style="display: block; text-align: left; font-size: 14px; line-height: 18px; font-family:Arial, Helvetica, sans-serif;color:#e51b3f; mso-line-height-rule: exactly; padding-right: 10px; padding-left: 10px; padding-top: 18px; font-weight: bold;">Ask the right questions.</td>
</tr>
<tr>
<td class="showMobile hideyahoo" valign="top" align="right" display="block" bgcolor="#ffffff" style="text-align: left; font-size: 13px; line-height: 18px; font-family:Arial, Helvetica, sans-serif;color:#514d4d; mso-line-height-rule: exactly; padding-right: 10px; padding-left: 10px; padding-bottom: 15px; padding-top: 15px; ">Having an honest discussion with your doctor can help you take a more active role in your care. These conversation starters can help you know what to ask.</td>
</tr>
</table>
</td>
<td width="1">
<!-- margin -->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
<!-- /margin -->
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849" height="49" width="192" style="padding: 0; height: 49px; margin: 0 auto; border-collapse: collapse; display">
<tr>
<td style="padding-left: 10px;" height="44">
<table valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849" height="44" style="border-collapse: collapse;">
<tr>
<td border="0" cellspacing="0" cellpadding="0" width="100%" align="center" valign="bottom" style="text-align: left; color: #ffffff; background-color: #ed1849; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; mso-line-height-rule: exactly;">GET QUESTIONS</td>
</tr>
<tr>
<td border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849">
<tr>
<td border="0" cellspacing="0" cellpadding="0" align="center" valign="middle" style="text-align: left; color: #ffffff; background-color: #ed1849; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; mso-line-height-rule: exactly;">FOR YOUR DOCTOR</td>
<td height="11" bgcolor="#ed1849" align="left" valign="middle" style="padding-left: 7px; vertical-align: middle; font-size: 0;"><img valign="middle" width="8" height="11" style=" display: block; width: 8px; height:11px;" src="images/arrow.jpg" alt="arrow"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Have your tried using conditional comments?
For Outlook 2016 it should be something like the following:
<!--[if mso 16]>some outlook 2016 only stuff<![endif]-->
I have a text table and an image table split into two columns on desktop. The image is set to only show on desktop, and not mobile. I need the text table to stay left-aligned on desktop, but center on the page on mobile, with the text remaining left-aligned for both displays.
Here’s what I’ve tried so far:
Adding spacer bars to each side of the text box to push it to the center, but then it was squeezing the box and extending it vertically since the width is fixed. I tried removing the fixed width property and using a fluid, percentage-based width, but then that caused the 2-column layout to break in desktop.
Using media queries to create a totally separate block that only populates on mobile. This worked well for most of the email clients, but for some reason, outlook wasn’t hiding the “mobile block” and so both of them were showing up and breaking the layout.
Using a fluid, percentage-based margin CSS property on the box. I ran into the “squeezing” issue here again, like with attempt #1.
Using a media query to add different amount of padding to the sides of the box to push it to the front. Again, rain into the squeezing issue like with attempts #1 and #3.
Using a media query with the CSS “Text-align” property instead of the HTML “align” property. This also broke the two column layout in desktop.
Nesting the table in another table, and playing with the alignment of both of the involved tables. This didn’t change anything, except breaking the two-column layout when one of the tables wasn’t left-aligned.
Here's my code:
<style type="text/css">
body {
margin: 0 !important;
padding: 0 !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_grey a {
color: #797979 !important;
text-decoration: none !important;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
/*Stylesheed for the devices width between 481px to 599px*/
#media only screen and (min-width:481px) and (max-width:599px) {
.em_wrapper {
width: 100% !important;
}
.em_aside {
padding: 0px 17px !important; /*Update the values as required*/
}
.em_aside1 {
padding: 0px 20px!important; /*Update the values as required*/
}
.em_hide {
overflow:hidden !important;
float:left !important;
display:none !important;
line-height:0px !important;
mso-hide: all !important;
}
.em_hide_desktop {
overflow: visible !important;
float: none !important;
display: block !important;
line-height:100% !important;
max-height:100% !important;
}
.em_left {
text-align: left !important;
}
.em_height {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_height30 {
height: 30px !important;
}
.em_width26 {
width: 26px !important;
}
.em_padtop {
padding-top: 40px !important;
}
..em_mobile_center {
align-content: center !important;
text-align: center !important;
}
}
/*Stylesheed for the devices width between 0px to 480px*/
#media only screen and (max-width:480px) {
.em_wrapper {
width: 100% !important;
}
.em_aside {
padding: 10px 17px !important; /*Update the values as required*/
}
.em_aside1 {
padding: 0px 20px !important; /*Update the values as required*/
}
.em_hide {
overflow:hidden !important;
float:left !important;
display:none !important;
line-height:0px !important;
mso-hide: all !important;
}
.em_hide_desktop {
overflow: visible !important;
float: none !important;
display: block !important;
line-height:100% !important;
max-height:100% !important;
}
.em_left {
text-align: left !important;
}
.em_height {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_height30 {
height: 30px !important;
}
.em_width26 {
width: 26px !important;
}
.em_padtop {
padding-top: 40px !important;
}
}
</style><!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="margin:0px; padding:0px;" bgcolor="#ffffff">
<!--Full width table start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center" valign="top"><table width="600" border="0" align="center" class="em_wrapper" cellpadding="0" cellspacing="0" style="table-layout:fixed; width:600px;">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td valign="top" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="343" align="left">
<tr>
<td class="em_aside1" style="padding: 20px 20px">
<table cellpadding="0" cellspacing="0" border="0" style="border:1px solid #ffffff">
<tr>
<p style="mso-table-lspace:0; mso-table-rspace:0;"><td bgcolor="#ffffff" valign="top" align="left" class="em_center_mobile em_grey" style="padding:0px 0px 0px 0px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:14px; line-height:24px; color:#BCBCBC;"><em>My wife and I were out of town when the doorbell ringing feature popped up on my app. I answered through the two-way talk and a suspicious man asked if this was a certain address. I told him that it wasn't. He noticed the voice was coming from a doorbell camera and abruptly stated thank you and left. The next day I read on our neighborhood's watch blog that there was a man going around breaking in if people weren't home. I'm so glad that we have this system, otherwise I feel like we would have been his next victim. <br />
</em><br /></td></p></tr>
<tr><td bgcolor="#ffffff" valign="top" align="right" class="em_grey" style="padding:0px 0px 0px 0px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:14px; line-height:24px; color:#BCBCBC;"><em>– Frank, TX</td></tr>
</table>
</td>
</tr>
</table>
<table class="em_hide" align="right" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #ffffff;">
<tr>
<td height="20" class="em_hide_desktop" style="display:none; overflow: hidden; line-height: 0px; float:left; mso-hide:all;">
<img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" />
</td>
</tr>
<tr>
<td height="52"> </td></tr>
<tr>
<p style="mso-table-lspace:0; mso-table-rspace:0;"><td valign="center" align="right" class="em_hide em_aside1" width="246">
<img src="https://wwwassets.s3.amazonaws.com/global/email/My%20Story%202018/2.14%20Send%20Image.jpg" width="244" height="275">
</td></p>
</tr>
</table>
</td>
</tr>
Check the code below. I added 100% width to the left table on mobile only.
#media(max-width: 599px) {
.leftText {
width: 100%;
}
}
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>My Story</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
<meta name="format-detection" content="telephone=no" />
<style type="text/css">
body {
margin: 0 !important;
padding: 0 !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
td,
a,
span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_grey a {
color: #797979 !important;
text-decoration: none !important;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit;
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
/*Stylesheed for the devices width between 481px to 599px*/
#media only screen and (min-width:481px) and (max-width:599px) {
.em_wrapper {
width: 100% !important;
}
.em_aside {
padding: 0px 17px !important;
/*Update the values as required*/
}
.em_aside1 {
padding: 0px 20px!important;
/*Update the values as required*/
}
.em_hide {
overflow: hidden !important;
float: left !important;
display: none !important;
line-height: 0px !important;
mso-hide: all !important;
}
.em_hide_desktop {
overflow: visible !important;
float: none !important;
display: block !important;
line-height: 100% !important;
max-height: 100% !important;
}
.em_left {
text-align: left !important;
}
.em_height {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_height30 {
height: 30px !important;
}
.em_width26 {
width: 26px !important;
}
.em_padtop {
padding-top: 40px !important;
}
..em_mobile_center {
align-content: center !important;
text-align: center !important;
}
}
/*Stylesheed for the devices width between 0px to 480px*/
#media only screen and (max-width:480px) {
.em_wrapper {
width: 100% !important;
}
.em_aside {
padding: 10px 17px !important;
/*Update the values as required*/
}
.em_aside1 {
padding: 0px 20px !important;
/*Update the values as required*/
}
.em_hide {
overflow: hidden !important;
float: left !important;
display: none !important;
line-height: 0px !important;
mso-hide: all !important;
}
.em_hide_desktop {
overflow: visible !important;
float: none !important;
display: block !important;
line-height: 100% !important;
max-height: 100% !important;
}
.em_left {
text-align: left !important;
}
.em_height {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_height30 {
height: 30px !important;
}
.em_width26 {
width: 26px !important;
}
.em_padtop {
padding-top: 40px !important;
}
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="margin:0px; padding:0px;" bgcolor="#ffffff">
<!--Full width table start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="center" valign="top">
<table width="600" border="0" align="center" class="em_wrapper" cellpadding="0" cellspacing="0" style="table-layout:fixed; width:600px;">
<!--=== HEADER SECTION === -->
<tr>
<td valign="top">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FF9C5A" style="width:600px;" class="em_wrapper">
<tbody>
<tr>
<td height="16" style="font-size:1px; line-height:1px; height:16px;"> </td>
</tr>
<tr>
<td valign="top" style="padding:0px 42px;" class="em_aside">
<table width="516" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:516px;">
<tbody>
<tr>
<td valign="top" align="center" width="117">
<a target="_blank" style="text-decoration:none;"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/story_logo.jpg" alt="MyStory" width="117" height="29" style="display:block; font-family:Arial, sans-serif; font-size:18px; line-height:22px; color:#ffffff; font-weight:bold;"
border="0" /></a>
</td>
<td> </td>
<td valign="middle" align="right">
<table border="0" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr>
<td valign="middle" align="center" width="14" style="font-size:0px; line-height:0px;">
<a href="mailto:"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/mail.jpg" width="20" height="14" alt="mail" style="display:block;font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#ffffff;"
border="0" /></a>
</td>
<td width="7" style="font-size:0px; line-height:0px;"></td>
<td valign="middle" align="right" style="font-family:'Int Circular PPT', Gotham, Arial, sans-serif, sans-serif; font-size:14px; line-height:17px; color:#ffffff;">Submit a story</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="15" style="font-size:1px; line-height:1px; height:15px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--=== //HEADER SECTION === -->
<!--=== BODY SECTION === -->
<tr>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td valign="top" align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td height="40" style="height:40px;" class="em_height30"> </td>
</tr>
<tr>
<td valign="top" align="center"></td>
</tr>
<tr>
<td valign="top" align="center" class="em_aside1" style="padding:0px 20px 0px 40px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:500px;">
<tbody>
<tr>
<td valign="top" align="center">
<table width="127" border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper" style="width:127px;">
<tbody>
<tr>
<td valign="top" align="center"><img src="https://wwwassets.s3.amazonaws.com/global/email/MyStory_logo_127x131.jpg" width="127" height="131" alt="" style="display:block; font-family:Arial, sans-serif; font-size:18px; line-height:22px; color:#ffffff; font-weight:bold;"
border="0" /></td>
</tr>
</tbody>
</table>
<table width="360" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:360px;">
<tbody>
<!--[if gte mso 9]>
<!-->
<tr>
<td class="em_hide" height="40" style="font-size:0px"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="40" alt="" style="display:block; font-size:0px;" border="0" />
</td>
</tr>
<![endif]-->
<!--[if gte mso 9]>
<tr>
<td height="20"><img src="https://wwwassets.s3.amazonaws.com/global/email/wms%202017/spacer.gif" width="1" height="1" alt="" style="display:block; font-size:0px;" border="0" />
</td>
</tr>
<!--[endif]-->
<tr>
<td height="20" class="em_hide_desktop" style="display:none; overflow: hidden; line-height: 0px; float:left; mso-hide:all;">
<img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" />
</td>
</tr>
<tr>
<td align="center">
<table class="em_hide" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" style="font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:22px; line-height:26px; color:#F5A623;">Your efforts at Vivint make all the difference in customers' experiences</td>
</tr>
</table>
<table class="em_hide_desktop" style="display:none; overflow:hidden; float:left; mso-hide:all; line-height:0px; font-size:0px;" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:22px; line-height:26px; color:#F5A623;">Your efforts at Vivint make all the difference in customers' experiences</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="6" style="font-size:1px; line-height:1px; height:6px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="20" class="em_hide_desktop" style="display:none; overflow:hidden; float:left; line-height:0px; mso-hide:all;"> </td>
</tr>
<tr>
<td>
<table class="leftText" cellpadding="0" cellspacing="0" border="0" width="343" align="left">
<tr>
<td class="em_aside1" style="padding: 20px 20px">
<table cellpadding="0" cellspacing="0" border="0" style="border:1px solid #ffffff">
<tr>
<p style="mso-table-lspace:0; mso-table-rspace:0;">
<td bgcolor="#ffffff" valign="top" align="left" class="em_center_mobile em_grey" style="padding:0px 0px 0px 0px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:14px; line-height:24px; color:#BCBCBC;"><em>My wife and I were out of town when the doorbell ringing feature popped up on my app. I answered through the two-way talk and a suspicious man asked if this was a certain address. I told him that it wasn't. He noticed the voice was coming from a doorbell camera and abruptly stated thank you and left. The next day I read on our neighborhood's watch blog that there was a man going around breaking in if people weren't home. I'm so glad that we have this system, otherwise I feel like we would have been his next victim. <br />
</em>
<br />
</td>
</p>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top" align="right" class="em_grey" style="padding:0px 0px 0px 0px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:14px; line-height:24px; color:#BCBCBC;"><em>– Frank, TX</td></tr>
</table>
</td>
</tr>
</table>
<table class="em_hide" align="right" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #ffffff;">
<tr>
<td height="20" class="em_hide_desktop" style="display:none; overflow: hidden; line-height: 0px; float:left; mso-hide:all;">
<img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" />
</td>
</tr>
<tr>
<td height="52"> </td></tr>
<tr>
<p style="mso-table-lspace:0; mso-table-rspace:0;"><td valign="center" align="right" class="em_hide em_aside1" width="246">
<img src="https://wwwassets.s3.amazonaws.com/global/email/My%20Story%202018/2.14%20Send%20Image.jpg" width="244" height="275">
</td></p>
</tr>
</table>
</td>
</tr>
<tr>
<td class="em_hide_desktop"height="20" style="height:20px; display:none; overflow;hidden; float:left; line-height:0px; mso-hide:all;"> </td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
<!----Begin Submit a story----->
<tr>
<td valign="top"><table bgcolor="#ff9c5a"width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td height="40" style="height:40px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="padding:0px 15px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:22px; line-height:28px; color:#ffffff;">Do you have a customer story to share?</td>
</tr>
<tr>
<td height="38" style="height:38px;" class="em_height30"> </td>
</tr>
<tr>
<td valign="top" align="center" style="font-size:0px; line-height:0px;"><table width="200" border="0" cellspacing="0" cellpadding="0" align="center" style="width:200px;">
<tbody>
<tr>
<td height="1" style="font-size:0px; line-height:0px; height:1px;" bgcolor="#ffffff"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" /></td>
</tr>
<tr>
<td valign="top" align="center" style="font-size:0px; line-height:0px;"><table width="200" border="0" cellspacing="0" cellpadding="0" align="center" style="width:200px;">
<tbody>
<tr>
<td width="1" style="width:1px;" bgcolor="#ffffff"></td>
<td height="38" align="center" valign="middle" style="height:38px;font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:20px; color:#ffffff;">Submit a story</td>
<td width="1" style="width:1px;" bgcolor="#ffffff"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="1" style="font-size:0px; line-height:0px; height:1px;" bgcolor="#ffffff"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="40" style="height:40px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---- End Submit a story section------->
<!-----Begin My Story Mission------>
<tr>
<td valign="top" bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:600px;">
<tbody>
<tr>
<td height="40" style="height:40px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:16px; line-height:26px; color:#ff9c5a;">My Story Mission</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="left" class="em_white" style="padding:0px 50px; font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:14px; line-height:24px; color:#ff9c5a;">Vivint’s success comes from the amazing people who take care
of our customers at every hour of every day. We applaud these
interactions through My Story—showing the daily difference
we make in customers’ homes, families, and lives.</td>
</tr>
<tr>
<td height="26" style="height:26px;"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="200" border="0" cellspacing="0" cellpadding="0" align="center" style="width:200px;">
<tbody>
<tr>
<td height="1" style="font-size:0px; line-height:0px; height:1px;" bgcolor="#ff9c5a"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" /></td>
</tr>
<tr>
<td valign="top" align="center"><table width="200" border="0" cellspacing="0" cellpadding="0" align="center" style="width:200px;">
<tbody>
<tr>
<td width="1" style="width:1px;" bgcolor="#ff9c5a"></td>
<td height="38" align="center" valign="middle" style="height:38px;font-family:'Int Circular PPT Book', Gotham, Arial, sans-serif; font-size:16px; color:#ff9c5a;">See more stories</td>
<td width="1" style="width:1px;" bgcolor="#ff9c5a"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="1" style="font-size:0px; line-height:0px; height:1px;" bgcolor="#ff9c5a"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="40" style="height:40px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!----End My Story Mission------>
<!--=== //BODY SECTION === -->
<!--=== FOOTER SECTION === -->
<tr>
<td align="center" bgcolor="#d0d2d2" style="padding:0px 24px;" class="em_aside"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:552px;">
<tbody>
<tr>
<td height="31" style="height:31px;" class="em_height"> </td>
</tr>
<tr>
<td valign="top" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" style="width:552px;">
<tbody>
<tr>
<td valign="top" align="center"><table width="128" border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper" style="width:128px;">
<tbody>
<tr>
<td valign="top" align="center"><table width="128" border="0" cellspacing="0" cellpadding="0" align="center" style="width:128px;">
<tbody>
<tr>
<td valign="middle" align="center" width="18" style="font-size:0px; line-height:0px; width:18px;"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/fb.jpg" width="18" height="18" alt="fb" style="font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#859eb0; display:block;" border="0" /></td>
<td width="17" style="font-size:0px; line-height:0px; width:17px;"> </td>
<td valign="middle" align="center" width="21" style="font-size:0px; line-height:0px; width:21px;"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/twitter.jpg" width="21" height="18" alt="fb" style="font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#859eb0; display:block;" border="0" /></td>
<td width="17" style="font-size:0px; line-height:0px; width:17px;"> </td>
<td valign="middle" align="center" width="18" style="font-size:0px; line-height:0px; width:18px;"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/insta.jpg" width="18" height="18" alt="fb" style="font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#859eb0; display:block;" border="0" /></td>
<td width="17" style="font-size:0px; line-height:0px; width:17px;"> </td>
<td valign="middle" align="center" width="20" style="font-size:0px; line-height:0px; width:20px;"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/yt.jpg" width="20" height="14" alt="fb" style="font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#859eb0; display:block;" border="0" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><table border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper">
<tbody>
<tr>
<td valign="top"><table border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td height="2" style="font-size:1px; line-height:1px; height:2px;" class="em_height"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/spacer.gif" width="1" height="1" alt="" style="display:block;" border="0" /></td>
</tr>
<tr>
<td valign="top" align="center" style="font-size:0px; line-height:0px;"><img src="https://wwwassets.s3.amazonaws.com/global/email/WMS%202017/img_2.jpg" width="135" height="14" alt="vivint.SmartHome" style="font-family:Arial, sans-serif; font-size:10px; line-height:12px; color:#ffffff; display:block;" border="0" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="31" style="height:31px;" class="em_height"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--=== //FOOTER SECTION === -->
</table></td>
</tr>
</table>
<!--Full width table End-->
<!--Increase/decrease the number of ( ) as per the template width-->
<div class="em_hide" style="white-space:nowrap;font:20px courier;color:#d0d2d2;"> </div>
</body>
</html>
<custom name="opencounter" type="tracking">
I have the following HTML:
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#C5C5C5">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding:0px 0px 0 10px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628618/image01_et7dqm.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></p>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<table>
<tr>
<td valign="top" style="padding:0 10px 15px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0">Two column - text right
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px">
SOME TEXT ABOUT SOMETHING YET TO BE CONFIRMED
<br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- End 2 Column Images - text left -->
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td align="right">
<a href="#"><img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" border="0" style="border-radius: 0px; width: 20px; display: block;" class="deviceWidth" />
</td>
</tr>
</table>
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#E1E1E1">
<tr>
<td style="padding:10px 0">
<table align="left" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td valign="top" align="left" class="center" style="padding:0px 0px 0 10px">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0"><img width="230" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628616/image1.jpg" alt="" border="0" style="border-radius: 4px; width: 230px; display: block;" class="deviceWidth" /></p>
</td>
</tr>
</table>
<table align="right" width="49%" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">
<tr>
<td style="font-size: 13px; color: #959595; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:20px 0 20px 15px">
<table>
<tr>
<td valign="top" style="padding:0 10px 15px 0">
<img src="http://www.emailonacid.com/images/blog_images/Emailology/2013/free_template_1/6.jpg" alt="" border="0" align="left" />
</td>
<td valign="middle" style="padding:0 10px 10px 0">Two column - text right
</td>
</tr>
</table>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0;padding:5px">
SOME TEXT YET TO BE CONFRMED
<br/><br/>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
which renders as follows
As you can see at the bottom I have a triangle which I'm trying to position so it overflows on to the next box, unfortunately I can not for the life of me get it to sit correctly, i.e the white space between the dark shade and lighter shade of gray to dis-appear can someone give me a hand please the end result is to look like this :
First of all it is recommended not to use tables for formatting page sections. In this case you can set the Parent of triangle as a relative positioned element with height of 0px and position triangle as absolute element. So:
<div class="deviceWidth" style="width:580px;position:relative;height:0;margin-right:auto;margin-left:auto;">
<img width="20" src="http://res.cloudinary.com/dncu6pqpm/image/upload/v1428628617/triangle_C5C5C5_ks8sg2.jpg" alt="" style="border:0;position:absolute;top:0;right:20px;border-radius: 0px; width: 20px;" class="deviceWidth">
</div>
also please note that :
remove the display:block from image
set border:0 inside styles not as a separate attribute
I have added margin-right:auto and margin-left:-auto to align div in center of screen