title: HTML: Paragraphs after table, appearing to right of table
body: <p>We are designing an application that will send e-mail to managers reminding them that they have to do certain approvals.  The e-mail is in HTML form, and contains a table.  We don't understand what we're doing wrong to cause the last paragraph to appear to the right of the table instead of under it.</p>
  
  <p>A sample is below.  The tool "tidy," on which I rely for things like this, has no tips this time.  </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta content=
  "HTML Tidy for Linux/x86 (vers 6 November 2007), see www.w3.org"
  name="generator"&gt;
  &lt;meta content='text/html; charset=us-ascii' http-equiv=
  "Content-Type"&gt;
  &lt;style type="text/css"&gt;
     body {font-family: Calibri;   }
     caption {font-family: Calibri;color: 'black'; font-size: '125%;  }
     table.main tr { };
     table.main td.bottomcaption {text-align: 'center'; vertical-align: 'middle'; font-family: 'Calibri'; color: 'black'; font-color: 'black'; font-size: '125%';   }
     table.main th {vertical-align: 'bottom'; color: blue; background-color: lightyellow;   }
  &lt;/style&gt;
  &lt;title&gt;Payable Time awaiting approval&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;Hello, &lt;strong&gt;Daffy Duck&lt;/strong&gt;:&lt;/p&gt;
  &lt;p&gt;According to our records, the following Payable Time is awaiting
  approval. Items shown below must be approved in order for
  compensation to take place.&lt;br&gt;&lt;/p&gt;
  &lt;p&gt;For questions, please contact &lt;a href=
  "MAILTO:SUPPORT@OUR_ORG.COM"&gt;Support&lt;/a&gt;&lt;/p&gt;
  &lt;table align="left" border="1" class='main' summary="Pending details"&gt;
  &lt;caption &gt;&lt;strong&gt;Awaiting approval by your reporting
  structure&lt;/strong&gt;&lt;/caption&gt;
  &lt;tr&gt;
  &lt;th align="left"&gt;&amp;nbsp;&lt;br&gt;
  Name&lt;/th&gt;
  &lt;th align="center"&gt;&amp;nbsp;&lt;br&gt;
  ID&lt;/th&gt;
  &lt;th align="center"&gt;Work&lt;br&gt;
  Date&lt;/th&gt;
  &lt;th align="center"&gt;&amp;nbsp;&lt;br&gt;
  Type&lt;/th&gt;
  &lt;th align="center"&gt;&amp;nbsp;&lt;br&gt;
  Hours&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="5"&gt;Reporting to Mickey M Mouse (MMM)&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td align="left"&gt;Daisy&lt;/td&gt;
  &lt;td align="left"&gt;D_DUCK&lt;/td&gt;
  &lt;td align="center"&gt;04/29/2013&lt;/td&gt;
  &lt;td align="left"&gt;REG&lt;/td&gt;
  &lt;td align="right"&gt;8.00&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td align="left"&gt;Daisy&lt;/td&gt;
  &lt;td align="left"&gt;D_DUCK&lt;/td&gt;
  &lt;td align="center"&gt;05/01/2013&lt;/td&gt;
  &lt;td align="left"&gt;REG&lt;/td&gt;
  &lt;td align="right"&gt;8.00&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td align="left"&gt;Daisy&lt;/td&gt;
  &lt;td align="left"&gt;D_DUCK&lt;/td&gt;
  &lt;td align="center"&gt;05/02/2013&lt;/td&gt;
  &lt;td align="left"&gt;OT&lt;/td&gt;
  &lt;td align="right"&gt;7.50&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;p&gt;&amp;nbsp;&lt;br&gt;&lt;/p&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p&gt;This message comes from The Support Team&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>We would very much like for the text "This message comes from..." to appear below the table, but instead it appears to the right of the table, aligned with the table's top.  This is true for IE7, IE8 and Firefox 12.</p>
  
  <p>I'd appreciate any suggestions to help this situation.</p>
  
  <p>Regards,
  Dennis</p>