I've been playing around and can't figure this out, so some advice would be greatly appreciated!
https://codepen.io/chaser87/pen/ZEQvydw
What I want to know deals with just the section headed by Meet your Department. When you shrink down this email, it stacks pretty much how I want it. However, I want to reorder the image and the block of copy in that section. Basically, I want the picture first, then the copy. I've tried doing nth-of-type stuff with elements but isn't working.
For extra background, each section is a 100% table, with a 600 px table within, then another 100% table within.
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<title>Boundless opportunities</title>
<style type="text/css">/*<![CDATA[*//* CLIENT-SPECIFIC STYLES */
body, table, td, hr, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
#media screen and (max-width: 616px) {
.fluid-table {
width: 100% !important;
}
table {
width: 100% !important;
}
td {
display: block !important;
}
td img {
display: block !important;
width: 60% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0px 0px 0px 0px !important;
}
h3 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.paragraph-copy {
padding: 20px 15px 20px 15px !important;
font-size: 100% !important;
line-height: 25px !important;
}
.paragraph-align {
text-align: center !important;
}
.social-icons {
padding: 5px 5px 10px 5px !important;
display: inline !important;
width: 15% !important;
}
}/*]]>*/
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #FFFFFF;" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table" role="presentation" width="600px">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><img alt="It's your time. Apply in July! Join the Cowboy family as part of #okstate25 and you'll get a free T-shirt!" class="fluid-table" src="https://dummyimage.com/1200x696/000/fff" style="width: 600px;"/>
</td>
</tr>
<tr>
<td class="paragraph-copy" style="padding: 5px 10px 10px 10px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; text-align: left;">
<p>{{First}},</p>
<p>We're excited to welcome you to the {{collegename}}! We look forward to seeing what the future holds for you as a {{major}} major within the Department of {{department}}.</p>
<p>We are here to assist you and look forward to working with you during your time at Generic State University. If we can help you in any way, please let us know. Again, congratulations on taking the next step and joining the {{college}}! </p></td>
</tr>
<!--FIRST ROW WITH PIC-->
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 0px 10px 0px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="center" style="padding-top: 15px">
<!--CONTENT-->
<img src="https://dummyimage.com/220x220/000/fff" style="width: 220px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-align paragraph-copy" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 5px 10px 20px 10px"><!--CONTENT-->
<h3>
<span>Meet Your Academic Advisor</span>
</h3>
<p>{{Advisor_Name}}</p>
<p>{{Advisor_Address}}</p>
<p>{{Advisor_Phone_Number}} </p>
<p>{{Advisor_Email}}</p>
<p>{{Advisor_Bio Page}}</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center" style="vertical-align: top;"><!--TWO COLUMNS-->
<table align="" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 10px 10px 10px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="58%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-copy paragraph-align" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 10px 10px 10px 10px"><!--CONTENT-->
<h3>
<span>Meet Your Department</span>
</h3>
<p>The {{Department}} is looking forward to your addition to the {{College}} family! </p>
<p>The main office for your department is located in {{department_address}} and you can reach them by phone at {{department_number}} or by emailing {{department_email}}.</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<!--CONTENT-->
<td align="center" style="padding: 15px 10px 10px 10px;"><img src="https://dummyimage.com/200x200/000/fff" style="width: 200px"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="padding: 5px 10px 0px 10px"><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="36%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="center" style="padding: 20px 10px 0px 10px">
<!--CONTENT-->
<img src="https://dummyimage.com/210x210/000/fff" style="width: 210px">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td class="paragraph-copy" align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 5px 10px 0px 10px"><!--CONTENT-->
<h3>
<span>Mark Your Calendar</span>
</h3>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
<p>Aug. 14 | Sample Event</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #E3E3E3" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--CONTENT-->
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td align="center" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 15px 0px 5px 0px; vertical-align: top;"><hr style="border-top: 2px solid #000000; width: 50%;">
<p style="padding-top: 15px;">Bookmark these calendars to stay informed about what's going on:</p>
<p><a style="color: #FE5C00" href="#"><strong>Academic College Calendar</strong></a><strong> | <a style="color: #FE5C00" href="#">College Calendar</a> | <a style="color: #FE5C00" href="#">Athletics Calendar</a></strong></p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #FFFFFF;" width="100%">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="fluid-table" role="presentation" width="600px">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><img alt="It's your time. Apply in July! Join the Cowboy family as part of #okstate25 and you'll get a free T-shirt!" class="fluid-table" src="https://dummyimage.com/600x95/0fe5c1/fff" style="width: 600px; display: block;" /></td>
</tr>
<!--FIRST ROW WITH PIC-->
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="background-color: black">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600"><!--TWO COLUMN SECTION-->
<tbody>
<tr>
<td align="center"><!--TWO COLUMNS-->
<table align="" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td><!--LEFT COLUMN-->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="56%">
<tbody>
<tr>
<td valign>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between">
<td align="left" style="padding: 10px 0px 10px 10px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 12px; line-height: 18px; color: #FFFFFF"><!--CONTENT-->
<p>College of Engineering <br>
Generic State University<br>
136 Whatever Building | Orlando, FL 00000</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--RIGHT COLUMN-->
<table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" width="38%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr style="display: block; align-items: center; justify-content: space-between"><!--CONTENT-->
<td align="right" style="padding: 25px 15px 20px 0px;"><img alt="OSU's Facebook Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Twitter Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Instagram Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /> <img alt="OSU's Snapchat Page" class="social-icons" src="https://dummyimage.com/45x45/ddad45/fff" style="width: 45px;" /></td>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Add reverse class to the cell containing Meet Your Department section's two columns and use the following CSS in your media query:
td:not(.reverse) {
display: block !important;
}
td.reverse {
display: flex;
flex-direction: column-reverse;
}
Related
How can I center the all child tables in the middle of the main parent table? What's the best way the add this blue bar between each headline with 10px margin or padding on the side between headlines?
<table width="600" border="1" cellpadding="10" cellspacing="0" align="center">
<tr>
<td>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline one
<br />headline</td>
<td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
</tr>
</table>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline two
<br />headline</td>
<td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
</tr>
</table>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline three
<br />headline</td>
</tr>
</table>
</td>
</tr>
</table>
You can add a parent table around the smaller tables, give it a width and center it. You can give the table a width if you want (total of all child tables) width="285" in this case or go without the width, either works. Try the code below:
<table width="600" border="1" cellpadding="10" cellspacing="0" align="center">
<tr>
<td>
<table border="0" cellpadding="10" cellspacing="0" align="center">
<tr>
<td>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline one
<br />headline</td>
<td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
</tr>
</table>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline two
<br />headline</td>
<td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
</tr>
</table>
<table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline three
<br />headline</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
One thing i noticed after doing this is if you make the template responsive you dont have to worry about the menu as it will stack by itself.
Hope this is what you were looking for.
td {
border-right: 4px solid #007cb0;
}
td:last-child {
border: none;
}
<table width="600" border="0" cellpadding="10" cellspacing="0" align="center">
<tr>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline one<br />headline</td>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline two<br />headline</td>
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline three<br />headline</td>
</tr>
</table>
I started making a email from a default Mailchimp layout, the "1:3 Column - Full Width" one.
When testing it on diferent devices, I realized that on mobile email client apps (Gmail, Yahoo, etc.), the area marked below is not displayed full width, when should.
I'm unable to find the mistake, I didn't touch any of the responsive code from the default layout.
-Thanks for your time.
Here is the code:
.templateContainer {
max-width: 600px !important;
}
.mcnImageCalendar {
max-width: 100% !important;
height: auto;
display: block;
}
#media only screen and (min-width:768px) {
.templateContainer {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
.columnWrapper {
max-width: 100% !important;
width: 100% !important;
}
}
<table>
<tbody>
<tr>
<td align="center" valign="top" class="templateColumns">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer">
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Try following code, u need to mention min-width and max-width
.templateContainer {
max-width: 600px !important;
}
.mcnImageCalendar {
max-width: 100% !important;
height: auto;
display: block;
}
#media only screen and (max-width: 768px) and (min-width: 481px) {
.templateContainer {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
.columnWrapper {
max-width: 100% !important;
width: 100% !important;
}
}
<table>
<tbody>
<tr>
<td align="center" valign="top" class="templateColumns">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer">
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
First - not every email clients use media queries. For example gmail don't. So Your email won't be responsive on gmail and many email clients like Outlook etc. I create my last email template for shop about year ago so do not remember every behavior but this is great tool https://litmus.com .
And what I remember - use only inline styles and tables in template. Good luck because creating email template is a terrible work :)
I am working with the new responsive templates in dotmailer and all elements are now block tables, there are no multi-column tables. I want to stack a right table element over a left table element in a responsive environment while keeping the left/right arrangement on the desktop.
Here is the code for the full element I am working in
I have tried creating the element as a table with columns but cannot save the file when I do that, I have tried css with floats on table ids, the tables, td, and inline css, some of this configurations would flip the order on desktop not a phone. (I am looking specificaly at iphone6)
Is it possible to flip the stacking on block elements?
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="row two-cols ee_columns ee_element" ee-type="container" data-title="2 columns" style="position: relative; background-color: rgb(174, 184, 194);">
<tbody>
<tr>
<td align="center" valign="top" class="row-inner f-size-0 element-pad" dir="ltr" style="padding: 0px 10px 0px 0px;"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:650px;" width="650" class="mso-table-width"><tr><td align="left" valign="top" style="width:331px;" width="320" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="stack-column stack-column-width" ee-percent-width="51" style="max-width: 50.92%; min-width: 331px; width: 650px;" id="right-stack">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="stack_bottom">
<tbody>
<tr>
<td dir="rlt" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="col-font-reset ee_element" ee-type="element">
<tbody>
<tr>
<td align="left" class="element-pad element-bord" style="padding: 0px;"><img src="img" alt="" style="width: 100%; display: block; height: auto;" class="ee_editable vedpw331" ee-width="331" border="0" width="331" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td><td align="left" valign="top" style="width:325px;" width="325" class="column"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="stack-column stack-column-width" ee-percent-width="49" style="max-width: 49.07%; min-width: 319px; width: 650px;" id="left-stack">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="stack_top">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="ee_element ee_spacer col-font-reset" ee-type="element">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 10px;" alt="" class="" border="0" width="1" height="10" /></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="col-font-reset ee_element" width="100%" ee-type="element">
<tbody>
<tr>
<td valign="top" align="left" class="element-pad element-bord"><div class="ee_editable">
<p class="h3" style="text-align: left; font-size: 17px; color: rgb(255, 255, 255); line-height: 120%;"><b>Headline</b></p>
</div></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="col-font-reset ee_element" width="100%" ee-type="element">
<tbody>
<tr>
<td valign="top" align="left" class="element-pad element-bord"><div class="ee_editable">
<p style="font-size: 14px; color: rgb(255, 255, 255); line-height: 120%;" class="col-text">Text elements here</p>
</div></td>
</tr>
</tbody>
</table>
<table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:319px;" width="319" class="mso-table-width"><tr><td align="left" valign="top" style="width:319px;" width="330" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 20px;padding-bottom: 0px;padding-left: 20px;" class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:279px;" width="279" class="mso-table-width"><tr><td align="left" valign="top" style="width:279px;" width="290" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table class="ee_element ee_spacer col-font-reset" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 20px;" alt="" class="" width="1" border="0" height="20" /></td>
</tr>
</tbody>
</table>
<table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;" class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:279px;" width="279" class="mso-table-width"><tr><td align="left" valign="top" style="width:279px;" width="290" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="background-color: rgb(218, 222, 227);" dir="ltr" class="col-inner ee_dropzone" align="left"><table class="col-font-reset ee_element" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="element-pad element-bord" valign="top" align="left"><div class="ee_editable">
<p style="margin: 0px; text-align: center; font-size: 17px; color: rgb(83, 169, 172);"><b>Text Button</b></p>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
<table class="ee_element ee_spacer col-font-reset" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 10px;" alt="" class="" width="1" border="0" height="10" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
There are a couple of ways of achieving this:
Method 1: I've found that the simplest way to achieve a reverse stack in email is to code your two columns into <th> tags, then with a class style the header cells to display as table-footer and table-header respectively.
<style>
#media only screen and (max-width: 580px) {
.w320{ width:320px; }
.thg{ display: table-header-group !important; width:100% !important; font-weight:normal;}
.tfg{ display: table-footer-group !important; width:100% !important; font-weight:normal;}
}
</style>
</head>
<body>
<div align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="w320" bgcolor="#333333">
<tr>
<th class="tfg" bgcolor="#CCCCCC">
<table width="100%" class="w320" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>left</td>
</tr>
</table>
</th>
<th class="thg" bgcolor="#999999">
<table width="100%" class="w320" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>right</td>
</tr>
</table>
</th>
</tr>
</table>
</div>
Method 2: If keeping your content in block tables is important to you then you could use the below method. The tables are declared with the right table before the left and reordered using the direction style. This method will require VML to keep then inline on Outlook 2007, 10 and 13.
<style>
#media only screen and (max-width: 580px) {
.w320{ width:320px; }
}
</style>
</head>
<body>
<div align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="w320">
<tr>
<td style="direction:rtl">
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0" style="direction:rtl">
<tr>
<td valign="top">
<![endif]-->
<table width="280" class="w320" border="0" cellspacing="0" cellpadding="0" style="display:inline" bgcolor="#CCCCCC">
<tr>
<td>right</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->
<table width="280" class="w320" border="0" cellspacing="0" cellpadding="0" style="display:inline" bgcolor="#999999">
<tr>
<td>left</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</body>
I want one tr tag on another tr tag.
HTML
<table width="600" align="center">
<tbody>
<tr>
<td height="10" align="center" style="background-color:#f1f1f1;"></td>
</tr>
<tr>
<td valign="top" align="center" style=" opacity: 0.5; background: #fa4b00 no-repeat;">
<table width="600" border="0" align="center">
<tbody>
<tr>
<td>
<table width="600" align="center">
<tbody>
<tr>
<td valign="top" align="center" id="1" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; line-height: 30px; letter-spacing:0.5px; text-align:center; padding-bottom: 0px; padding-left: 0px; padding-top: 60px;">
<span class="wrap_textbox" style="font-weight: lighter; font-size: 26px;"> Some Text</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I want the text to be on the top of the background div.
I am not actually sure what are you looking for but if you want to show your text on first background have a look
$(document).ready(function(){
$(".wrap_textbox").clone().appendTo("#top");
});
table tr td table tr td .wrap_textbox{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table width="600" align="center">
<tbody>
<tr>
<td height="10" align="center" style="background-color:#f1f1f1;" id="top"></td>
</tr>
<tr>
<td valign="top" align="center" style=" opacity: 0.5; background: #fa4b00 no-repeat;">
<table width="600" border="0" align="center">
<tbody>
<tr>
<td>
<table width="600" align="center">
<tbody>
<tr>
<td valign="top" align="center" id="1" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; line-height: 30px; letter-spacing:0.5px; text-align:center; padding-bottom: 0px; padding-left: 0px; padding-top: 60px;">
<span class="wrap_textbox" style="font-weight: lighter; font-size: 26px;"> Some Text</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
Your question is pretty confusing but why not use <th> to place the text above like so:
<table width="600" align="center">
<tr style="background-color: #f1f1f1;">
<th style="font-weight: lighter; font-size: 26px;">
Some Text
</th>
</tr>
<tr>
<td valign="top" align="center" style=" opacity: 0.5; background: #fa4b00 no-repeat;">
<table width="600" border="0" align="center">
<tr>
<td>
more text
</td>
</tr>
</table>
</td>
</tr>
</table>
You can then adjust the <th> style in the CSS to how you want it to be displayed.
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