Hello,

My email in the outlook preview pane is not rendering properly. My header and footer, which contains images, is going wider than the given width in the outlook 2010 preview pane. It must have something to do with the images, because if I remove them there seems to be no problem.

Expected behavior:
Respect the width of 600px.

Observed behavior:
The rows with images go wider than the max width of 600px.

Does somebody has a solution for this please? Thanks a lot in advance :)

This is my code:

<div style="margin:0px auto;max-width:600px;background:#ffffff;" class="header">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px;width:100%;background:#ffffff;" class="header">

<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:0px 0px 0px 0px;" class="header"><!--[if (gte mso 9) | (IE)]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr>
<td width="600" style="vertical-align:top;width:600px;"> <![endif]-->
<div class="mj-column-per-100 outlook-group-fix header" style="vertical-align:top;display:inline-block;font-size:0px;line-height:0px;text-align:left;width:100%;"><!--[if (gte mso 9) | (IE)]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"> <tr>
<td width="300" style="vertical-align:middle;width:300px;"> <![endif]-->
<div class="mj-column-per-50 outlook-group-fix" style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:50%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%">

<tr>
<td align="left" style="word-wrap:break-word;font-size:0px;padding:0px 0px 0px 20px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">

<tr>
<td style="width:123px;"><a class="image" href="https://www.acerta.be/nl" name="www_acerta_be_nl" target="_blank" xt="SPCLICKSTREAM"><img alt="acerta logo" contentid="7752a3e0-163fd4ff0e3-be7239722bf9e6184ab469c11075fd86" height="auto" name="acertalogo.png" spname="acertalogo.png" src="acertalogo.png" style="border:none;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;width: 123px" title="acerta" width="123" xt="SPIMAGE" /></a></td>
</tr>

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

</table>
</div>
<!--[if (gte mso 9) | (IE)]>
</td> <td width="300" style="vertical-align:middle;width:300px;">
<![endif]-->

<div class="mj-column-per-50 outlook-group-fix" style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:50%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%">

<tr>
<td align="right" style="word-wrap:break-word;font-size:0px;padding:20px;">
<table border="0" cellpadding="5" cellspacing="0" style="cellspacing:0px;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;mso-padding-alt: 5px;mso-cellpadding:5px;" width="30%">

<tr>
<td align="right"><a href="https://www.facebook.com/AcertaBelgium" name="facebook" style="text-decoration:none;" xt="SPCLICKSTREAM"><img alt="facebook" contentid="7752a3e0-163fd4ff101-be7239722bf9e6184ab469c11075fd86" name="fb.png" spname="fb.png" src="fb.png" title="facebook" xt="SPIMAGE" /></a></td>
<td align="right"><a href="https://twitter.com/AcertaNL" name="twitter" style="text-decoration:none;" xt="SPCLICKSTREAM"><img alt="twitter" contentid="7752a3e0-163fd4ff1e8-be7239722bf9e6184ab469c11075fd86" name="twitter.png" spname="twitter.png" src="twitter.png" title="twitter" xt="SPIMAGE" /></a></td>
<td align="right"><a href="https://www.linkedin.com/company/162259/" name="linkedin" style="text-decoration:none;" xt="SPCLICK"><img alt="linkedin" contentid="7752a3e0-163fd4ff122-be7239722bf9e6184ab469c11075fd86" name="linkedin.png" spname="linkedin.png" src="linkedin.png" title="linked" xt="SPIMAGE" /></a></td>
</tr>

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

</table>
</div>
<!--[if (gte mso 9) | (IE)]>
</td> </tr>
</table> <![endif]--></div>
<!--[if (gte mso 9) | (IE)]>
</td></tr></table> <![endif]--></td>
</tr>

</table>
</div>