title: How to create a two column email newsletter
body: <p>I am trying to create a two column email flyer but I'm having trouble with the coding as Outlook hates CSS.</p>
  
  <p>I'm using tables to keep it as simple as possible but I want two separate tables on the left and the right so I can add data into it as I wish.</p>
  
  <p>I tried using <code>float</code> left and right on the two tables but Outlook ignores this style.</p>
  
  <p>I know the two grey tables at the bottom are each in their own separate "holder" tables but this is so I can duplicate the grey "data" tables for when I add new articles.</p>
  
  <pre><code>&lt;table class="all" width="auto" height="auto" border="0" cellspacing="0"&gt;&lt;tr&gt;&lt;td height="504"&gt;
  
  &lt;table width="750" height="140" border="0" cellspacing="0"&gt;
    &lt;tr&gt;
      &lt;td width="200" valign="bottom" bgcolor="#E6E6E6"&gt;&amp;nbsp;&lt;/td&gt;
  
      &lt;td width="345" align="center" valign="bottom" bgcolor="#E6E6E6"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td width="200" valign="bottom" bgcolor="#E6E6E6"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td align="center" valign="bottom" bgcolor="#E6E6E6"&gt;&lt;font color="#111111" face="Arial Narrow" size="+2"&gt;DECEMBER NEWSLETTER&lt;/font&gt;&lt;/td&gt;
      &lt;td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"&gt;&lt;font size="2"&gt;&lt;strong&gt;#4 - &lt;span class="orange"&gt;04.12.13&lt;/span&gt;&lt;/strong&gt;&lt;/font&gt;&lt;/td&gt;
      &lt;td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table width="750" border="0" cellspacing="0" cellpadding="0"&gt;
    &lt;tr&gt;
      &lt;td width="75" height="50" bgcolor="#E6E6E6" scope="row"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td width="600" rowspan="2" scope="row"&gt;&lt;img src="http://placehold.it/600x200"/&gt;&lt;/td&gt;
      &lt;td width="75" bgcolor="#E6E6E6" scope="row"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td width="75" height="81" scope="row"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td scope="row"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  
  &lt;table class="holder" width="750" border="0" cellspacing="0" cellpadding="0"&gt;
    &lt;tr&gt;
      &lt;td valign="top" scope="row"&gt;
  
      &lt;table class="inlinetableleft" width="360"&gt;
          &lt;tr&gt;
            &lt;td width="371" align="left"&gt;    
  
  &lt;!------------LEFT COLUMN------------------&gt;        
  
  &lt;table width="360" border="0" cellspacing="0" cellpadding="0"&gt;
    &lt;tr&gt;
      &lt;th height="103" colspan="4" align="left" valign="middle" bgcolor="#CCCCCC" scope="row"&gt;&amp;nbsp;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/table&gt;    
  
  &lt;!--------------LEFT COLUMN END-------------&gt;      
  
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table class="inlinetableright" width="360"&gt;
  &lt;tr&gt;
    &lt;td align="left"&gt;    
  
  &lt;!------------RIGHT COLUMN------------------&gt;                   
  
  &lt;table width="360" border="0" cellspacing="0" cellpadding="0"&gt;
    &lt;tr&gt;
      &lt;td height="106" align="left" bgcolor="#CCCCCC" scope="row"&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;       
  
  &lt;!-----------RIGHT COLUMN END--------------&gt;       
  
  &lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  
  
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is a fiddle of my newsletter so far, it's the bottom two grey tables that I want to be side by side.</p>
  
  <p><a href="http://jsfiddle.net/rtyM9/" rel="nofollow">Fiddle</a></p>