jQuery UI Tabs in table offsetting content in other cells?

I've built up a template using a 3 column layout using a table (according to the advice given here). 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.

        <table>
            <tr>
                <td id="left" class="ui-content-widget ui-corner-all">
                    <p>Left</p>
                </td>
                <td id="middle" class="ui-content-widget ui-corner-all">
                    <p>Lorem ipsum... </p>
                </td>
                <td id="right" class="ui-content-widget ui-corner-all">
                    <ul>
                            <li> <a href="#Tabs-Tab1">Tab1</a></li>
                            <li> <a href="#Tabs-Tab2">Tab2</a></li>
                    </ul>
                    <div id="Tabs-Tab1">
                        <p>Nunc volutpat ... </p>
                    </div>
                    <div id="Tabs-Tab2">
           开发者_如何学JAVA             <p>Lorem ipsum ... </p>
                    </div>
                </td>
            </tr>
        </table>

Any ideas on how to fix this? Here is a site with this issue.

In the resets.css you can set the vertical align to 'top' instead of 'baseline'

vertical-align: top;

Your real problem is this:

.ui-helper-clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

And in particular, the clear:both;. Try changing the clearfix technique:

#right .ui-helper-clearfix {
    clear: none;
    overflow: hidden;
}

This question is starting to look at lot like this one: CSS Layout: 2 column fixed-fluid (again)