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, 5 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, 5 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

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free