Text next to table getting "cut off" by Outlook's table spacing issues

I'm working on a template that involves a two-column section with text on one side and an image on the other. I want it to stack in mobile clients, so what I have is a td that contains a table and some text (in h2 and p tags) - the table contains two cells, one for the image and one to add a little space (15px) between the image and the text. But when the image is on the left, the beginning of the text is getting cut off in Outlook 2013; I'm losing 9px from the left side of the text. (For what it's worth, I have no issues when the image is on the right.)

My 15px "gap" table cell seems to be working just fine, the 9px space begins after the 15px ends, so I suspect it may be caused by those issues Outlook always seems to have with adding space around tables. Or maybe something similar - I saw the fix from Email on Acid but had no luck with it. And that specific issue is supposedly in 2007 and 2010, whereas my email is actually fine in 2007 and broken in 2013. (Not sure yet about 2010, will be testing there in an hour or so.)

If I take the image out of its table I can get rid of the 9px space that's eating my text, but then I can't find a way to get ANY space inbetween there and my text keeps trying to cuddle with my image.

At this point the only option I can think of is to give up on having the columns stack in the mobile version so I can just revert to having everything in table cells. But I would really love to have the mobile version stack, so if anyone can think of a way to either (a) stop Outlook from adding this text-eating space to my table or (b) get some space between my image and my text in some other fashion, I'd be very much appreciative! Thanks!

roshodgekiss roshodgekiss, 3 years ago

Hi there mrmarkham, would it be possible for you to post your code here? Alternately, feel free to send it to our team. Once we have a look at what you're working on, we'll do our best to lend a hand here :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mrmarkham, 3 years ago

Sorry for the delay - thought I had a workaround and wanted to test it more thoroughly before I responded, but...no such luck.

Anywhere, here are the pertinent bits of my code (before everything gets inlined):

CSS:

/* Mobile Specific Styles */
@media only screen and (max-width: 480px) {
    table.w15, td.w15, img.w15 { width: 10px !important; }
    table.w260, td.w260, img.w260 { width: 300px !important; }
    table.w585, td.w585, img.w585 { width: 290px !important; }
    table.w600, td.w600, img.w600 { width: 300px !important; }
    table.h15, td.h15 { height: 10px !important; }
    table.h20, td.h20 { height: 10px !important; }
    p.show, table.show, tr.show, td.show, img.show, h2.show { max-height: none !important; font-size: 12px !important; display: block !important; }
    img { height: auto; line-height: 100%;}
    h2 { font-size: 16px !important; line-height: 22px !important; }
    h2.h2-top-margin { margin-top: 10px !important; }
    h2.left-margin, p.left-margin { margin-left: 10px !important; }
    .remove-margin { margin: 0px !important; }
}

/* Client-specific Styles */
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
table, tr, td { mso-table-lspace:0pt; mso-table-rspace:0pt; } /* Force Outlook to stop adding extra space around aligned tables */

/* Reset Styles */
body { background-color: #f8f5f0; margin: 0; padding: 0; }
img { outline: none; text-decoration: none; display: block;}
br, strong br, b br, em br, i br { line-height:100%; }
h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #008bb0 !important; }
h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: red !important; }
h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }
table td, table tr { border-collapse: collapse; }
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important; }

/* General Styles */
#background-table { background-color: #f8f5f0; }
body, td { font-family: Arial, Helvetica, Geneva, sans-serif; }
p.show, span.show, table.show, tr.show, td.show, img.show, h2.show { max-height: 0px; font-size: 0; display: none; mso-hide: all; }
h2 { font-size: 18px; line-height: 24px; color: #ef4135; font-weight: bold; margin-top: 0px; margin-bottom: 12px; font-family: Arial, Helvetica, Geneva, sans-serif; }
h2.h2-top-margin { margin-top: 15px; }
h2 a { color: #ef4135; }
.body-text { font-size: 13px; line-height: 18px; color: #444444; margin-top: 0px; margin-bottom: 12px; font-family: Arial, Helvetica, Geneva, sans-serif; }
.body-text a { color: #008bb0; font-weight:bold; }
.body-text img { max-width: 100% }

HTML:

<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr><td align="center" bgcolor="#f8f5f0">
<table class="w600" style="margin:0 10px;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td class="w600" width="600" bgcolor="#f8f5f0">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td class="w600" width="600">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff">
<tbody>
<tr><td class="w600" width="600">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td class="w585" width="585">
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td><img class="w260" border="0" width="260" src="test-image-300.jpg" alt=""></td>
<td class="w15" width="15"></td>
</tr>
<tr class="show"><td class="h15"></td><td class="w15" width="15"></td></tr>
</tbody></table>
<h2 class="h2-top-margin left-margin" align="left">Heading</h2>
<p class="body-text left-margin" align="left">Body text.</p>
</td>
<td class="w15" width="15"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td class="w600 h20" width="600" height="20" bgcolor="#f8f5f0"></td></tr>
</tbody></table>
</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

I obviously stripped out a lot of stuff that wasn't affecting this particular section (although I fear it may still be too messy/complicated to wade through - sorry!)

Looks good most places, but for some reason this happens in Outlook 2013:
http://i43.tinypic.com/2uogmzr.png

Outlook 2013 seems to want to add 9px of space to the right of each table, but the space isn't really taking up any space of its own, it's just overlapping what was there. Because it's not really taking up space, all of the other sections of the template are fine - this is the only place where there's something important directly to the right of the table.

Would be very appreciative of any suggestions, I'm pretty much at my wit's end with this one! If I put both the image and the text in tds, I can't get them to stack properly in mobile clients (they don't seem to like me trying to apply display: block to tds). If I put them both in tables within one td, they won't stack in Outlook web access, which turns the entire layout into a mess.

Redferret, 3 years ago

Hi mrmarkham,

This is a notorious issue with some versions of Outlook where a gap gets added to the right of the last table in a row.

You could remove some unnecessary elements like the tbody tags and see if that makes a difference to the size of the gap but i think the best suggestion i can give is to remove the spacer td and instead use a right margin on the table that should cover up the gap.

If that doesn't work then use two tables, one aligned left and one aligned right, set the widths so that you've got a gap between them then in your mobile styles set float to none (to remove alignment) and width to 100%.

Hope that makes sense!


Gmail app apologist
mrmarkham, 3 years ago

You're a genius! Putting a margin-right on the table didn't work because the margin didn't show up at all in most versions of Outlook, but using two tables aligned opposite directions did the trick!

I feel pretty dumb now that I didn't think of that earlier - I read somewhere that Outlook couldn't handle tables aligned in opposite directions and so I never even tried it, but it seems like it's doing just fine.

Thanks SO much!

JohnP JohnP, 3 years ago

I'd suggest against margins or alignments and stick with the empty cell.

You have a lot of nested tables there that aren't needed. I left the classes and styling off, but this very basic layout does the same thing:

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#f8f5f0">
  <tr>
    <td>
      <table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center">
        <tr>
          <td width="260">
            <img style="margin: 0; border: 0; padding: 0; display: block;" src="test-image-300.jpg" width="260" alt="">
          </td>
          <td width="15">&nbsp;
          </td>
          <td width="315" valign="top">
            &nbsp;<br>
              Heading
              <br><br>
              body text
          <td>
        </tr>
      </table>
    </td>
  </tr>
</table>
mrmarkham, 3 years ago

Hmm - if that does the same thing, I don't know how to make it do so! If I put everything in tds like that, I don't know of any reliable way to stack them in the mobile version - that was the reason for the large number of tables.

However, I do seem to have run into a problem with the two-tables-aligned-in-opposite-directions solution. I had another part of the email where a similar thing was supposed to happen - but a bit more complicated. (As in, maybe so complicated that I'm just going to have to accept that it's not going to happen.)

In this other section, there are three columns, which are supposed to stack themselves in the mobile version. Each column contains an image with some text underneath it, and those are supposed to unstack themselves in the mobile version. I thought I had it working - I had three tables for the three columns, the first two aligned left and the last one aligned right. The middle one had an empty cell on its left to get the gap between the first two, and then I just had some "unused space" in the width of the containing table in order to get the gap between the last two while still giving Outlook the wiggle room it needs. And then within each table, I used the two-tables-aligned-in-opposite-directions method, and that seemed to work fine across almost all clients....

Until I added more text. And then this happened:
http://i43.tinypic.com/wrdnvn.png

Has anyone seen anything like that before?!

Like I said, I totally understand if this layout is too just too complicated to work and/or too much of a mess for anyone to deal with.....but I figured it couldn't hurt to post again in case anyone had a suggestion!

JohnP JohnP, 3 years ago

Try this technique to float tables:

http://stackoverflow.com/questions/1767 … 4#17677304

It (was) my best kept secret as it also works in Gmail.

mrmarkham, 3 years ago

John - I can't seem to get that code to work quite right in Outlook or in Gmail. Most versions of Outlook are okay, but in 2007 and 2011 the tables are stacking. Same thing's happening in Gmail. (And in Apple Mail 5, fwiw.)

JohnP JohnP, 3 years ago

Unfortunately the viewing window on on both Litmus and EOA isn't wide enough, which is causing some of the previews to stack (Gmail and Yahoo possibly). I've tested it myself on both Gmail and Outlook 2007 and can confirm it works. I don't know why it doesn't work in the Litmus and EOA Outlook renders.

With this in mind, there is a good chance that 2011 would return the same result as Outlook 2007, but maybe someone can confirm that and Yahoo work correctly when resizing the window beyond 640px.

I have no answer for Apple Mail 5 at the moment - maybe someone else in the community will make the final connection...

Redferret, 3 years ago

Johns got some good advice there, mso-table-lspace:0pt; and mso-table-rspace:0pt; also seem to do the same trick.

mrmarkham, if you post your latest code I'm sure we'll be able to figure it out!


Gmail app apologist
mrmarkham, 3 years ago

Well, I've tried ten thousand different things and run into different problems at different times, so by now the problem is a little different than what I started with. My two column section is fine, but my three column section is getting messed up. I gave up on having the image and text in each column "unstack" when the columns stacked since it seemed like there was no way I was going to get that working, but it's still giving me trouble.

The second and third columns keep getting pushed down (not underneath the first one, all three still fit next to each other, the second and third are just too low). It appears to be related to the length of my text - either the text in the "feature story" section or the text in the three column section, or maybe both. At one point it seemed like every time my text in the three column section got too long, the 2nd and 3rd columns slipped down, but now it seems like I've gotten them to stay put with longer text as long as the feature story text isn't too long. (No idea why that's connected somehow.)

In both cases, it seems to happen when the text gets taller than its corresponding image. Which means I have a lot more space to work with for the feature story - so I could probably deal with that although it's less than ideal...whereas if I actually am limited to the height of the small images for my "small items" text, that will be too limiting to really work. So if anyone can figure out why this is breaking with large amounts of text, that would be awesome! :)

Here's what I have at this point, with dummy content:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=320, target-densitydpi=device-dpi" />
<title></title>
<style type="text/css">
/* Mobile Specific Styles */
@media only screen and (max-width: 480px) {
    table.w0, td.w0 { width: 0 !important; }
    table.w15, td.w15, img.w15 { width: 10px !important; }
    table.w156, td.w156, img.w156 { width: 180px !important; }
    table.w186, td.w186, img.w186 { width: 300px !important; }
    table.w186-100, td.w186-100, img.w186-100 { width: 100px !important; }
    table.w186-190, td.w186-190, img.w186-190 { width: 190px !important; }
    table.w260, td.w260, img.w260 { width: 300px !important; }
    table.w310, td.w310, img.w310 { width: 280px !important; }
    table.w325, td.w325, img.w325 { width: 290px !important; }
    table.w570, td.w570, img.w570 { width: 280px !important; }
    table.w600, td.w600, img.w600 { width: 300px !important; }
    table.h8, td.h8 { height: 5px !important; }
    table.h15, td.h15 { height: 10px !important; }
    table.h20, td.h20 { height: 10px !important; }
    table.hide, td.hide, img.hide, p.hide, span.hide, h1.hide { display:none !important; }
    #enews-date { margin-top: 12px !important; }
    .header-content-left, .header-content-right .outer-text { text-align: center !important; }
    p.footer-content-left, div.footer-content-left, p.web-link { text-align: center !important; }
    #logo { display: inline-block !important; }
    img { height: auto; line-height: 100%;}
    h1 { font-size: 16px !important; line-height: 22px !important; text-align: center !important; }
    h2 { font-size: 16px !important; line-height: 22px !important; }
    h2.h2-top-margin { margin-top: 10px !important; }
    .left-margin { margin-left: 10px !important; }
    .right-margin { margin-right: 10px !important; }
    .bottom-margin { margin-bottom: 10px !important; }
    .float { clear: both !important; float: left !important; }
    .float-none { float: none !important; }
}

/* Client-specific Styles */
body { width: 100% !important; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; display:block !important; } /* Force Hotmail to display emails at full width */
table, tr, td { mso-table-lspace:-1pt; mso-table-rspace:-1pt; } /* Force Outlook to stop adding extra space around aligned tables */

/* Reset Styles */
/* Add 100px so mobile switch bar doesn't cover street address. */
body { background-color: #f8f5f0; margin: 0; padding: 0; }
img { outline: none; text-decoration: none; display: block;}
br, strong br, b br, em br, i br { line-height:100%; }
h1, h2, h3, h4, h5, h6 { line-height: 100% !important; -webkit-font-smoothing: antialiased; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #008bb0 !important; }
h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {    color: red !important; }
/* Preferably not the same color as the normal header link color.  There is limited support for pseudo classes in email clients, this was added just for good measure. */
h1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: purple !important; }
/* Preferably not the same color as the normal header link color. There is limited support for pseudo classes in email clients, this was added just for good measure. */  
table td, table tr { border-collapse: collapse; }
.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color: black; text-decoration: none !important; border-bottom: none !important; background: none !important;
}    /* Body text color for the New Yahoo. This example sets the font of Yahoo's Shortcuts to black. */

/* General Styles */
#background-table { background-color: #f8f5f0; }
body, td { font-family: Arial, Helvetica, Geneva, sans-serif; }
.outer-text { font-size: 12px; line-height: 14px; color: #777777; margin: 0; }
.outer-text a { color: #008bb0; text-decoration: none !important; }
h1 { font-size: 22px; line-height: 24px; color: #444444; margin-top: 12px; margin-bottom: 6px; }
.in-this-issue, .footer-content-left, .footer-content-right, .footer-content-bottom, .web-link { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes on header and footer. */
.in-this-issue { font-size: 12px; line-height: 18px; color: #ffffff; margin: 0; }
.web-link, .web-link a { font-size: 15px; line-height: 18px; color: #000000; font-weight: bold; text-decoration: none !important; margin: 0; align: left; }
.footer-content-left, .footer-content-right { font-size: 12px; line-height: 18px; color: #000000; margin: 0; }
.footer-content-left a { color: #000000; display: inline-block; }
.footer-content-left img { display: inline-block; }
.footer-content-bottom, .footer-content-bottom a { font-size: 12px; line-height: 18px; color: #ffffff; margin: 0; font-weight: bold; text-decoration: underline; }
h2 { font-size: 18px; line-height: 24px; color: #ef4135; font-weight: bold; margin-top: 0px; margin-bottom: 12px; font-family: Arial, Helvetica, Geneva, sans-serif; }
h2.h2-top-margin { margin-top: 15px; }
h2 a { color: #ef4135; }
.body-text { font-size: 13px; line-height: 18px; color: #444444; margin-top: 0px; margin-bottom: 12px; font-family: Arial, Helvetica, Geneva, sans-serif; }
.body-text a { color: #008bb0; font-weight:bold; }
.body-text img { max-width: 100% }
p.last-p { margin-bottom: 0; }

</style>
</head>
<body>
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr><td align="center" bgcolor="#f8f5f0">
<table class="w600" style="margin:0 10px;" align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td class="w600" width="600">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td class="w600" width="600" height="20"></td></tr>
<tr><td class="w600" width="600"><p class="outer-text" align="center" style="margin-bottom: 12px;">Trouble viewing? <a href="http://www.mmhayes.com/email/eNewsletter-2013-07.html">View in browser.</a></p></td></tr>
<tr><td class="w600" width="600">

<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td class="w600" width="600">

<table class="w600" border="0" cellpadding="0" cellspacing="0" width="200" align="left">
<tbody>
<tr>
<td class="w600 header-content-left" width="200">
logo goes here
</td>
</tr>
</tbody>
</table>
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="350" align="right">
<tbody>
<tr>
<td class="w600 header-content-right" width="350">
<h1 align="right">Quarterly eNewsletter</h1>
<p id="enews-date" class="outer-text" align="right" style="text-transform: uppercase; font-weight: bold;">Summer 2013</p>
</td>
</tr>
</tbody>
</table>

</td>
</tr>
</tbody>
</table>

</td>
</tr>
<tr><td class="w600 h15" width="600" height="15"></td></tr>
</tbody>
</table>
</td></tr>
<tr><td class="w600" width="600" bgcolor="#ef4135">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td class="w15" width="15"></td>
<td class="w570" width="570">
<table class="w570" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr><td class="w600 h8" width="600" height="8"></td></tr>
<tr><td class="w600" width="600"><p class="in-this-issue" align="left"><strong>In This Issue:</strong> Feature Story Title &bull; Secondary Story Title &bull; Small Item Title &bull; Small Item Title &bull; Small Item Title</p></td></tr>
<tr><td class="w600 h8" width="600" height="8"></td></tr>
</tbody>
</table>
</td>
<td class="w15" width="15"></td>
</tr>
</tbody>
</table>
</td></tr>
<tr><td class="w600" width="600" bgcolor="#f8f5f0">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td class="w600 h20" width="600" height="20"></td></tr>

<!-- Begin Feature Story -->
<tr><td class="w600" width="600">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff">
<tbody>
<tr><td class="w600" width="600"><img class="w600" border="0" width="600" src="http://i43.tinypic.com/23rahyb.jpg
" alt="" /></a></td></tr>
<tr><td class="w600" width="600" valign="top">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td class="w15" width="15"></td><td class="w570 h15" width="570" height="15"></td><td class="w15" width="15"></td></tr>
<tr><td class="w15" width="15"></td><td class="w570" width="570" valign="top">
<h2 align="left">Feature Story Title</h2>
<p class="body-text" align="left">Lorem ipsum dolor sit amet. Porem aut autemporibus ma cullaccusa doluptatint eum voluptatur? Odia que vit que non re nis ratem eum et raectempore, consequo ea cus, sequas eum si dicius suntum sum quiaecto tecum velloresti beaquatior mod quid quis sundaera conse que modi torro doluptatibus nistis nonest, nos dolo verorpos nat ullo tenestrum expligendis a solorro maximi, omnitamus ex ex eturit, utemporae.</p>
<p class="body-text" align="left">Ex eum quiberori arias sint rectatio incid mi, qui nectis maxime postem atur acepere volesequia parum velitam, soluptia dunto cuptate mquaspe rnatis dolupta sam fuga. Nam utemodi dus evendanda quas cusa sum et ariossequi dicti occae ex evellupitint ad et inis sunto ex eum inis verorei.</p>
<p class="body-text" align="left">Cilliqu osandic to erio tet officabo. Nes none volor aute autatur? Sam, earit molor abores et eum nihil essit eariorerspit ut es net quae. Ficiatur a vendus, coribusani ne lique parumque aperepro illendu cipici ilis simo veriorrovit.</p>
</td><td class="w15" width="15"></td></tr>
<tr><td class="w15" width="15"></td><td class="w570 h15" width="570" height="15"></td><td class="w15" width="15"></td></tr>
</tbody>
</table>
</td></tr>
<tr><td class="w600 h20" width="600" height="20" bgcolor="#f8f5f0"></td></tr>
</tbody></table>
</td></tr>
<!-- End Feature Story -->

<!-- Begin Secondary Story, Image on Left -->
<tr><td class="w600" width="600">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff">
<tbody>
<tr><td class="w600" width="600">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td class="w600" width="600">
<table class="w260 float-none" align="left" border="0" cellpadding="0" cellspacing="0" width="260">
<tbody>

<tr>
<td class="w260" width="260" valign="top"><img class="w260" border="0" width="260" src="http://i43.tinypic.com/2q00pa9.jpg" alt="" /></td>
</tr>
</tbody>
</table>
<table class="w325 float-none left-margin" align="right" border="0" cellpadding="0" cellspacing="0" width="325">
<tbody>
<tr>
<td class="w325" width="325" valign="top">
<table class="w325" border="0" cellpadding="0" cellspacing="0" width="325">
<tbody>
<tr><td class="w310 h15" width="310" height="15"></td><td class="w15" width="15"></td></tr>
<tr><td class="w310" width="310" valign="top">
<h2 align="left">Secondary Story Title</h2>
<p class="body-text" align="left">Ut ommost officit eturiorrum simendem ad eos mil es explabore voluptur? Qui nus ius am facea pore volupta tempore strum, alique essinih.</p>
<p class="body-text" align="left">Iiliqui ut magnisquis resequi del illit andandandios aut quam explaccuscia dis eaquibus si diasped et estrum dolupta tatibeatia doluptat.</p>
</td><td class="w15" width="15"></td></tr>
<tr><td class="w310 h15" width="310" height="15"></td><td class="w15" width="15"></td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td class="w600 h20" width="600" height="20" bgcolor="#f8f5f0"></td></tr>
</tbody></table>
</td></tr>
<!-- End Secondary Story, Image on Left -->

<!-- Begin Small Items Section -->
<tr><td class="w600" width="600">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#f8f5f0">
<tbody>
<tr><td class="w600" width="600" valign="top">
<div style="max-width: 600px;">

<table class="w186 bottom-margin" width="195" border="0" cellpadding="0" cellspacing="0" align="left" bgcolor="#ffffff">
<tbody>
<tr><td class="w186" width="195">
<img class="w186" border="0" width="195" src="http://i42.tinypic.com/261m0ec.jpg" alt="" />
</td></tr>
<tr><td class="w186" width="195" valign="top">
<table class="w186" border="0" cellpadding="0" cellspacing="0" width="195">
<tbody>
<tr><td class="w15" width="15"></td><td class="w156 h15" width="165" height="15"></td><td class="w15" width="15"></td></tr>
<tr><td class="w15" width="15"></td><td class="w156" width="165" valign="top">
<p class="body-text last-p" align="left">Beatio est omnihil luptati asserec ullata voluptaspit rempeditate as comnimpor mo consecto tem volorem. Les autatem verferupti cus remqui qui blabor andis est veniet eium vel min poraepe lictur autem ea doluptatatem accatiis vel il imet alia quiatur aut odis aut hilluptur, sitios volestia volum quidebit dolupta tistorepuda pliquam facimil lorias.</p>
</td><td class="w15" width="15"></td></tr>
<tr><td class="w15" width="15"></td><td class="w156 h15" width="165" height="15"></td><td class="w15" width="15"></td></tr>
</tbody>
</table>
</td></tr>
</tbody>
</table>

<table class="w186 bottom-margin" width="195" border="0" cellpadding="0" cellspacing="0" align="left" bgcolor="#ffffff">
<tbody>
<tr><td class="w186" width="195">
<img class="w186" border="0" width="195" src="http://i42.tinypic.com/261m0ec.jpg" alt="" />
</td></tr>
<tr><td class="w186" width="195" valign="top">
<table class="w186" border="0" cellpadding="0" cellspacing="0" width="195">
<tbody>
<tr><td class="w15" width="15"></td><td class="w156 h15" width="165" height="15"></td><td class="w15" width="15"></td></tr>
<tr><td class="w15" width="15"></td><td class="w156" width="165" valign="top">
<p class="body-text last-p" align="left">Ribus, que eturios tiaspedisse eatureptate sint modi disi quodis ea nihicte mporati offic temolorum quatendam eosam, ommolore, tem sum volore eictur, sit dicto dolupit.
</p>
</td><td class="w15" width="15"></td></tr>
<tr><td class="w15" width="15"></td><td class="w156 h15" width="165" height="15"></td><td class="w15" width="15"></td></tr>
</tbody>
</table>
</td></tr>
</tbody>
</table>

<table class="w186 bottom-margin" width="195" border="0" cellpadding="0" cellspacing="0" align="left" bgcolor="#ffffff">
<tbody>
<tr><td class="w186" width="195">
<img class="w186" border="0" width="195" src="http://i42.tinypic.com/261m0ec.jpg" alt="" />
</td></tr>
<tr><td class="w186" width="195" valign="top">
<table class="w186" border="0" cellpadding="0" cellspacing="0" width="195">
<tbody>
<tr><td class="w15" width="15"></td><td class="w156 h15" width="165" height="15"></td><td class="w15" width="15"></td></tr>
<tr><td class="w15" width="15"></td><td class="w156" width="165" valign="top">
<p class="body-text last-p" align="left">Porum essit a quo bea doluptae vid modissit, aut eri ut experum sedipsa conet latur aut volupta quatinc tatiur suntium ne od maximpost alicim eum eliquis et verit delest, il is deri aut maximpe reperch illoritius ma quam aliquaspel mod qui bernam essunt, quassintis exces etur alit volupta tissunt.</p>
</td><td class="w15" width="15"></td></tr>
<tr><td class="w15" width="15"></td><td class="w156 h15" width="165" height="15"></td><td class="w15" width="15"></td></tr>
</tbody>
</table>
</td></tr>
</tbody>
</table>

</div>
</td></tr>
<tr><td class="w600 h20" width="600" height="20" bgcolor="#f8f5f0"></td></tr></tbody></table>
</td></tr>
<!-- End Small Items Section -->

</tbody>
</table>
</td></tr>
<tr><td class="w600" width="600" bgcolor="#c9c1b8">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td class="w15" width="15"></td>
<td class="w570" width="570">
<table class="w570" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr><td class="w570 h15" width="570" height="15"></td></tr>
<tr>
<td class="w570" width="570">
<table class="w570" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td class="w570" valign="top" width="320">
<p class="web-link" align="left">web link goes here</p>
<p class="footer-content-left" align="left">phone number</p>
<div class="footer-content-left" style="margin-top: 5px; line-height: 0px;" align="left">social media icons go in here</div>
</td>
<td class="hide w0" width="50"></td>
<td class="hide w0" valign="top" width="200">
<p class="footer-content-right" align="right">street address line 1</p>
<p class="footer-content-right" align="right">street address line 2</p>
<p class="footer-content-right" align="right">street address line 3</p>
</td>
</tr>
</tbody>
</table>
</td></tr>
<tr><td class="w570 h15" width="570" height="15"></td></tr>
</tbody>
</table>
</td>
<td class="w15" width="15"></td>
</tr>
</tbody>
</table>
</td></tr>
<tr><td class="w600" width="600" bgcolor="#ef4135">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td class="w15" width="15"></td>
<td class="w570" width="570">
<table class="w570" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr><td class="w600 h8" width="600" height="8"></td></tr>
<tr>
<td class="w600" width="600" valign="middle">
<p class="footer-content-bottom" align="center">unsubscribe link goes in here</p>
</td>
</tr>
<tr><td class="w600 h8" width="600" height="8"></td></tr>
</tbody>
</table>
</td>
<td class="w15" width="15"></td>
</tr>
</tbody>
</table>
</td></tr>
<tr><td class="w600" width="600" bgcolor="#f8f5f0">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td class="w600 h15" width="600" height="15"></td></tr>
<tr><td class="w600" width="600" valign="top">
<table class="w600" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td class="w15" width="15"></td>
<td class="w570" width="570">
<p class="outer-text" align="center">copyright notice, link to privacy policy, etc.</p>
</td>
<td class="w15" width="15"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td class="w600 h15" width="600" height="20"></td></tr>
</tbody>
</table>
</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Redferret, 3 years ago

Ok I've figured out whats happening here.

When the email gets to a certain length Outlook inserts a page break, so because of where your 3 columns are on the page, the page break is happening and forcing two columns down to the next page.

Unfortunately as yet no-ones come up with an easy solution to this. My only suggestions would be either add more sections above the 3 column bit or you could also try splitting out your table rows into individual tables so it'll break in a more suitable place!


Gmail app apologist
mrmarkham, 3 years ago

Really?! I wondered earlier if that could be what was happening, but I didn't really give it too much thought because what I was seeing didn't look like I expected a page break to look. (The last two columns get pushed down but not far enough to actually be lower than the first one, so there's no actual gap.)

But now that you mention it...you're right, that's got to be what's happening. I should have realized once I discovered last night that the length of the feature story was affecting it too!

Thanks so much, that helps a lot to know what's going on. Since I'll be using this template (with different amounts/types of stories) for future newsletters too, knowing what's happening will be enough for me to fix it in many cases by making something longer or shorter so the page break falls in a decent place.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098