title: Why is my text not wrapping in my table cell?
body: <p>I have created a parent table with two columns and within each column I have 6 child tables (3 in each) so I looks like a newsletter.</p>
  
  <p>What I want is for the child table to extend down as I fill them with X amount of text but it's not working. I have set my child table widths and have set the CSS to <code>table-layout:fixed;</code> but when I type too much into one of the child tables the text flows out instead of wrapping.</p>
  
  <p>It's strange because when I first created the tables it worked perfectly but now I can't figure out what I've done to stop it from working.</p>
  
  <p><strong>And before people tell me to use divs, I'm using tables as it's going to be an email flyer for Outlook.</strong></p>
  
  <p><a href="http://jsfiddle.net/T53rD/1/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table width="700" border="0" cellspacing="0" cellpadding="0"&gt;
  
    &lt;tr&gt;
      &lt;td width="350" valign="top" bgcolor="#FFFFFF" style="padding-top:10px;" scope="row"&gt;
  
        &lt;center&gt;
  
          &lt;table width="90%" border="0" height="100%" cellpadding="0" cellspacing="0" class="content"&gt;
            &lt;tr&gt;
              &lt;td height="30px" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"&gt;&lt;strong&gt;Title&lt;/strong&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td  valign="top" bgcolor="#F4F4F4" scope="row" style="padding:10px;"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt; 
  
          &lt;/center&gt;   
          &lt;br /&gt; 
  
      &lt;center&gt;
          &lt;table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0"&gt;
            &lt;tr&gt;
              &lt;td height="30px" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"&gt;&lt;strong&gt;Title&lt;/strong&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td valign="top" bgcolor="#F4F4F4" style="padding:10px;" scope="row"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;         
          &lt;/center&gt;
          &lt;br&gt;
  
        &lt;center&gt;
          &lt;table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0"&gt;
            &lt;tr&gt;
              &lt;td height="30" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"&gt;&lt;strong&gt;Title&lt;/strong&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td bgcolor="#F4F4F4" scope="row" valign="top" style="padding:10px;"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;         
          &lt;/center&gt;
  
  
      &lt;td width="350" valign="top" bgcolor="#FFFFFF" style="padding-top:10px;"&gt;
  
        &lt;center&gt;
          &lt;table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0"&gt;
            &lt;tr&gt;
              &lt;td height="30px" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"&gt;&lt;strong&gt;Title&lt;/strong&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td valign="top" bgcolor="#F4F4F4" style="padding:10px;" scope="row"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;         
          &lt;/center&gt;
          &lt;br&gt;
  
  
        &lt;center&gt;
          &lt;table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0"&gt;
            &lt;tr&gt;
              &lt;td height="30" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"&gt;&lt;strong&gt;Title&lt;/strong&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td bgcolor="#F4F4F4" scope="row" valign="top" style="padding:10px;"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;         
          &lt;/center&gt;
          &lt;br /&gt;
  
        &lt;center&gt;
          &lt;table class="content" width="90%" height="100%" border="0" cellspacing="0" cellpadding="0"&gt;
            &lt;tr&gt;
              &lt;td height="30" align="left" bgcolor="#999999" scope="row" style="padding-left:10px;"&gt;&lt;strong&gt;Title&lt;/strong&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td bgcolor="#F4F4F4" scope="row" valign="top" style="padding:10px;"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;         
        &lt;/center&gt;
  
        &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      padding:0px;
      margin:0px;
      background-color:#ffffff;
      font-family:Arial, Helvetica, sans-serif;
  }
  
  table {
      table-layout:fixed;
  }
  
  strong {
      color:rgb(255,255,255);
      font-size:14px;
  }
  </code></pre>