jQuery UI Вкладки в таблице смещения содержимого в других ячейках?

Question

Я построил шаблон с использованием 3-х колоночного макета с использованием таблицы (согласно совету, данному здесь ).Затем я вставляю несколько вкладок jQuery UI в одну из ячеек.Однако содержимое в других ячейках, по-видимому, смещено на заголовок вкладок.Я весьма озадачен происходящим и не могу проследить, откуда исходит это смещение с помощью Firebug или как сместить вертикальное положение контента в других ячейках.

        <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">
                        <p>Lorem ipsum ... </p>
                    </div>
                </td>
            </tr>
        </table>

Есть идеи как это исправить?Вот сайт с этой проблемой.

Answer 1

Ваша настоящая проблема заключается в следующем:

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

И, в частности, clear:both;.Попробуйте изменить метод clearfix:

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

Этот вопрос начинает выглядеть так: Макет CSS: 2 колонки с фиксированной жидкостью (снова)

Answer 2

В resets.css вы можете установить вертикальное выравнивание на «top» вместо «baseline»

vertical-align: top;