Within my html file, I have two columns, within each column is a table. Within each table multiple rows with inline styles. When content in the left column is enough so that it pushes down to a certain point, a white break or space appears in the right column at that spot. If no content reaches that point in the left column, the right column appears just fine, no odd break/white space.
Main send method is mailchimp campaign, but this same thing happens when using the "insert as text" feature in outlook to send html email in the body of a message. The phenomenon is ONLY happening in outlook 2010.
Including an image of the white space in question. The white portion circled should not be there, should be a uniform gray background as seen above and below it. As you see, it breaks the content in half as well. Yet there is no corresponding white space in the left column. Including full code as well, the lines where this is happening is approximately 54 (left column content) and 112 (the link that is breaking in half on the right). I have a feeling outlook is doing this for some other reason and not based on those specific lines in the code, but I don't know that.
odd white space in right column
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body style="margin: 0; padding: 0; background-color:#EBEBEB"><table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#EBEBEB" >
<tbody>
<tr>
<td><br>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tbody>
<tr>
<td colspan="2"><img src="https://mcusercontent.com/1ef099905d4d96754c45a57bf/images/916957d8-b90a-4366-aba5-e59a58a974a9.png" width="800" height="195" style="display: block" alt=""/></td>
</tr>
<tr>
<td width="550" style="font-family:Calibri, Arial; font-size:13px; color: #494949; padding: 16px 20px 8px 21px"><strong>JANUARY 2021</strong></td>
<td width="250" align="right" style="padding: 16px 20px 8px 21px"><img src="https://mcusercontent.com/1ef099905d4d96754c45a57bf/images/0e3c86e8-d4df-4e03-b6a9-e76d9ac54aac.gif" style="border: none" width="18" height="18" alt=""/> <img src="https://mcusercontent.com/1ef099905d4d96754c45a57bf/images/008a2bf3-c0cd-431b-8375-2b5e150f39b0.gif" style="border: none" width="18" height="18" alt=""/> <img src="https://mcusercontent.com/1ef099905d4d96754c45a57bf/images/9851496c-80b9-4946-af9b-7cfbff69fd6c.gif" style="border: none" width="18" height="18" alt=""/></td>
</tr>
<tr>
<td width="550" valign="top" style="padding: 10px 20px 20px 20px"><table width="510" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family:calibri; arial; sans-serif; font-size:22px; color: #ffffff; padding: 5px 20px 6px 20px; background-color: #e31837"><strong>A YEAR LIKE NO OTHER</strong></td>
</tr>
<tr>
<td style="font-family:calibri; arial; sans-serif; font-size:15px; line-height: 20px; color: #494949; padding: 20px 20px 45px 20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
<tr>
<td style="font-family:calibri; arial; sans-serif; font-size:22px; color: #ffffff; padding: 5px 20px 6px 20px; background-color: #e31837"><strong>A YEAR LIKE NO OTHER</strong></td>
</tr>
<tr>
<td style="font-family:calibri; arial; sans-serif; font-size:15px; line-height: 20px; color: #494949; padding: 20px 20px 45px 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
<tr>
<td style="padding: 0px 20px 0px 20px; border: none"><hr color="#E0E0E0"></td>
</tr>
<tr>
<td style="font-family:calibri; arial; sans-serif; font-size:15px; line-height: 20px; color: #494949; padding: 20px 20px 45px 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
<tr>
<td style="padding: 0px 20px 0px 20px; border: none"><hr color="#E0E0E0"></td>
</tr>
<tr>
<td style="font-family:calibri; arial; sans-serif; font-size:15px; line-height: 20px; color: #494949; padding: 20px 20px 45px 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
<tr>
<td style="font-family:calibri; arial; sans-serif; font-size:15px; line-height: 20px; color: #494949; padding: 20px 20px 45px 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
<tr>
<td style="font-family:calibri; arial; sans-serif; font-size:15px; line-height: 20px; color: #494949; padding: 20px 20px 45px 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table></td>
<td width="250" rowspan="2" valign="top" style="padding: 10px 20px 20px 0px"><table width="230" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" style="font-family:calibri; arial; sans-serif; font-size:15px; color: #FFFFFF; padding: 9px 0px 9px 20px; background-color: #5a5a5a"><strong><span style="font-size: 17px">»</span> AT IN THE NEWS</strong></td>
</tr>
<tr>
<td valign="top" style="font-family:calibri; arial; sans-serif; font-size:15px; color: #494949; padding: 20px 20px 20px 20px; background-color: #f1f1f1"><a href="https://www.google.com" style="text-decoration:none; color: #005daa">Lorem Ipsum Dolor Sit Amet Consectetur Adisping Elsumond Minim Exept Est Id Ang</a> - Philadelphia Business Journal<br>
<br>
<a href="https://www.google.com" style="text-decoration:none; color: #005daa">Lorem Ipsum Dolor Sit Amet Consectetur Adisping Elsumond Minim Exept Est </a> – St. Louis Business Journal</td>
</tr>
<tr>
<td style="padding: 4px"> </td>
</tr>
<tr>
<td><img src="https://mcusercontent.com/1ef099905d4d96754c45a57bf/images/1ab4eb65-27aa-4856-b49e-63ba1e1c31c1.png" style="display: block" width="230" height="130" alt=""/></td>
</tr>
<tr>
<td style="font-family:calibri; arial; sans-serif; font-size:15px; color: #494949; padding: 20px; background-color: #f1f1f1"><a href="https://www.google.com" style="text-decoration:none; color: #005daa">Lorem Ipsum Dolor Sit Amet Consectetur Adisping Elsumond Minim Exept Est Id Ang</a> - Philadelphia Business Journal<br>
<br>
<a href="https://www.google.com" style="text-decoration:none; color: #005daa">Lorem Ipsum Dolor Sit Amet Consectetur </a> – Missouri Lawyers Weekly</td>
</tr>
<tr>
<td style="padding: 4px"> </td>
</tr>
<tr>
<td><img src="https://mcusercontent.com/1ef099905d4d96754c45a57bf/images/1ab4eb65-27aa-4856-b49e-63ba1e1c31c1.png" style="display: block" width="230" height="130" alt=""/></td>
</tr>
<tr>
<td style="font-family:calibri; arial; sans-serif; font-size:15px; color: #494949; padding: 20px; background-color: #f1f1f1"><a href="https://www.google.com" style="text-decoration:none; color: #005daa">Lorem Ipsum Dolor Sit Amet Consectetur Adisping Elsumond Minim Exept Est Id Ang</a> - Philadelphia Business Journal<br>
<br>
<a href="https://www.google.com" style="text-decoration:none; color: #005daa">Lorem Ipsum Dolor Sit Amet Consectetur </a> – Missouri Lawyers Weekly<br>
<br>
<a href="https://www.google.com" style="text-decoration:none; color: #005daa">Lorem Ipsum Dolor Sit Amet Consectetur Lorem Ipsum Dolor Sit Amet Akdo</a> – St. Louis Business Journal</td>
</tr>
<tr>
<td style="padding: 4px"> </td>
</tr>
<tr>
<td><img src="https://mcusercontent.com/1ef099905d4d96754c45a57bf/images/1ab4eb65-27aa-4856-b49e-63ba1e1c31c1.png" style="display: block" width="230" height="130" alt=""/></td>
</tr>
<tr>
<td style="font-family:calibri; arial; sans-serif; font-size:15px; color: #494949; padding: 20px; background-color: #f1f1f1"><a href="https://www.google.com" style="text-decoration:none; color: #005daa">Lorem Ipsum Dolor Sit Amet Consectetur Adisping Elsumond Minim Exept Est Id Ang</a> - Philadelphia Business Journal<br>
<br>
<a href="https://www.google.com" style="text-decoration:none; color: #005daa">Lorem Ipsum Dolor Sit Amet Consectetur </a> – Missouri Lawyers Weekly<br>
<br>
<a href="https://www.google.com" style="text-decoration:none; color: #005daa">Lorem Ipsum Dolor Sit Amet Consectetur Lorem Ipsum Dolor Sit Amet Akdo</a> – St. Louis Business Journal</td>
</tr>
<tr>
<td style="padding: 4px"> </td>
</tr>
<tr>
<td><img src="https://mcusercontent.com/1ef099905d4d96754c45a57bf/images/1ab4eb65-27aa-4856-b49e-63ba1e1c31c1.png" style="display: block" width="230" height="130" alt=""/></td>
</tr>
<tr>
<td style="padding: 4px"> </td>
</tr>
<tr>
<td><img src="https://mcusercontent.com/1ef099905d4d96754c45a57bf/images/1ab4eb65-27aa-4856-b49e-63ba1e1c31c1.png" style="display: block" width="230" height="130" alt=""/></td>
</tr>
<tr>
<td style="font-family:calibri; arial; sans-serif; font-size:15px; color: #494949; padding: 20px; background-color: #f1f1f1"> </td>
</tr>
<tr>
<td style="padding: 4px"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#525252" style="font-family:calibri; arial; sans-serif; font-size:11px; line-height: 13px; color: #bdbdbd; padding: 10px 10px 15px 15px"> </td>
</tr>
</tbody>
</table>
<br>
<br></td>
</tr>
</tbody>
</table>
</body>
</html>