title: jQuery UI Tabs in table offsetting content in other cells?
body: <p>I've built up a template using a 3 column layout using a table (according to the advice given <a href="https://stackoverflow.com/questions/867667/is-there-a-simple-3-column-pure-css-layout">here</a>).  Then, I'm putting in some jQuery UI tabs into one of the cells.  However, the content in the other cells appears to be offset by the tabs header.  I'm quite stumped by what is happening and cannot trace back to where this offset is coming from using Firebug or how to shift the vertical position of the content in the other cells.  </p>
  
  <pre><code>        &lt;table&gt;
              &lt;tr&gt;
                  &lt;td id="left" class="ui-content-widget ui-corner-all"&gt;
                      &lt;p&gt;Left&lt;/p&gt;
                  &lt;/td&gt;
                  &lt;td id="middle" class="ui-content-widget ui-corner-all"&gt;
                      &lt;p&gt;Lorem ipsum... &lt;/p&gt;
                  &lt;/td&gt;
                  &lt;td id="right" class="ui-content-widget ui-corner-all"&gt;
                      &lt;ul&gt;
                              &lt;li&gt; &lt;a href="#Tabs-Tab1"&gt;Tab1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt; &lt;a href="#Tabs-Tab2"&gt;Tab2&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div id="Tabs-Tab1"&gt;
                          &lt;p&gt;Nunc volutpat ... &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div id="Tabs-Tab2"&gt;
                          &lt;p&gt;Lorem ipsum ... &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>Any ideas on how to fix this?  Here is a <a href="http://evansiroky.com/testFolder/jqueryuitabsinatable/test.html" rel="nofollow noreferrer">site</a> with this issue.  </p>