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

Question

Я создал шаблон, используя раскладку из трех столбцов, используя таблицу (согласно рекомендациям here). Затем я помещаю некоторые вкладки пользовательского интерфейса jQuery в одну из ячеек. Тем не менее, содержимое в других ячейках, кажется, смещено заголовком вкладок. Я полностью зациклен на том, что происходит, и не может отследить, где это смещение исходит от использования 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> 

Любые идеи о том, как исправить это? Вот этот вопрос: site.

Answer 1

В resets.css вы можете установить вертикальную Align, чтобы 'сверху' вместо 'базовой'

vertical-align: top; 

Answer 2

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

.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 Layout: 2 column fixed-fluid (again)