2 column fluid layout that works in Outlook?

Anyone been able to get span/div/p elements to float next to one another in Outlook?

I can't seem to find a solution that doesn't result in the content blocks stacking one above the other (which I want for mobile view, but not default in Outlook)

I'm after something like this:

<table bgcolor="#959595" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="5%">
    </td>
    <td width="90%" align="center" bgcolor="#858585">
    
    <span style="background-color: #252525; float: left;">
      <table width="320" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left" style="padding: 10px;">
            <font style="font-family: Century Gothic, sans-serif; font-size: 16px; color: #FFFFFF;">
            Content Block 1
            </font>
          </td>
        </tr>
      </table>
    </span>
    
    <span style="background-color: #454545; float: left;">
      <table width="320" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left" style="padding: 10px;">
            <font style="font-family: Century Gothic, sans-serif; font-size: 16px; color: #FFFFFF;">
            Content Block 2
            </font>
          </td>
        </tr>
      </table>
    </span>
   
    </td>
    <td width="5%">
    </td>
  </tr>
</table>
JohnP JohnP, 4 years ago

Okay, figured it out. Both content blocks should look like this:

<div align="left" style="float:left;">
      <table width="320" border="0" cellpadding="0" cellspacing="0" bgcolor="#252525" align="left">
        <tr>
          <td align="left" style="padding: 10px;">
            <font style="font-family: Century Gothic, sans-serif; font-size: 16px; color: #FFFFFF;">
            Content Block 2
            </font>
          </td>
        </tr>
      </table>
</div>

Needs align="left" on both div and table, float: left; on div.

roshodgekiss roshodgekiss, 4 years ago

Thanks JohnP - align is definitely the way to go, sadly float isn't particularly well supported. Appreciate you sharing the solution here :)


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

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