Possible max-width workaround in Outlook

I would like to please request some feedback on the following.

I have often seen this workaround to apply a maximum width to a fluid layout (100% width) in Outlook:

<!--[if (gte mso 9)|(IE)]>
  <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
  <![endif]-->
...

However this has the undesirable effect of fixing the width at 600.  And I wanted to retain the fluidity.  As a result, I began testing other alternatives.

After much trial and error, I found that applying the 1000px width in the style tag of container's <td> seems to work for limiting the max width in Outlook (so far I only tested 20010 and 2013), while not affecting fluidity in other browsers.

<body bgcolor="#f0f0f0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin:0; padding:0;-webkit-text-size-adjust:none; -ms-text-size-adjust:none;background: #f0f0f0;">

<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#f0f0f0" style="background: #f0f0f0;" id="bodyTable">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:1000px; margin: auto;"  class="container">
<tr>

<td style="width:1000px">

<!-- Preheader: BEGIN -->
....

Any thoughts or feedback?

zerocents zerocents, 2 years ago

I think there's a lot of misunderstanding out there about how tables work. All you need is a 100% width table and a fixed-width nested table. The nested table will automatically collapse as you shrink the window without needing to add extra styles, so long as don't specify a fixed width on any nested <table> tag.

This is what I use:

<div style="min-width: 320px;">

<table cellspacing="0" cellpadding="0" border="0" width="100%">
  <tr>
    <td align="center">

    <!-- This gives you a fluid width between 320px and 640px -->

    <table cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td width="640">

        <!-- Percentage widths on nested table tags are fine -->

        <table cellspacing="0" cellpadding="0" border="0" width="100%">
          <tr>
            <td width="50%"></td>
            <td width="50%"></td>
          </tr>
        </table>


        <!-- This is also fine -->

        <table cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td width="320"></td>
            <td width="320"></td>
          </tr>
        </table>


        <!-- Avoid doing this. Fixed widths on nested table tags will break the flow. -->

        <table cellspacing="0" cellpadding="0" border="0" width="600">
          <tr>
            <td width="50%"></td>
            <td width="50%"></td>
          </tr>
        </table>

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

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

</div>

This gives you a fluid layout with a max width that works in Outlook without using media queries.


Michael Muscat

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