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

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098