jquery - css フロート 2 列レイアウトでは JQuery UI タブヘッダーが大きすぎる

Question

を使用した 2 列レイアウトの右側の列に JQuery UI タブを設定しようとしていますfloat: left。

問題は、タブのヘッダーのサイズが左の列と同じ高さになることです。

HTML:

<div id="zone_content">
    <div id="zone_main">
        <div id="zone_left">
            <p>Stuff</p><p>Stuff</p><p>Stuff</p><p>Stuff</p><p>Stuff</p>
        </div>
        <div id="zone_tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Another Tab</a></li>
            </ul>
            <div id="tabs-1">
                <p>blah blah blah blah</p>
            </div>
            <div id="tabs-2">
                <p>bloh bloh bloh bloh</p>
            </div>
        </div>
    </div>
</div>
<script>
    $(function() {
        $("#zone_tabs").tabs();
    });
</script>

CSS:

#zone_main {
  overflow: auto;
  width: 100%;
}
#zone_left {
  float: left;
  width: 250px;
}
#zone_tabs {
  margin-left: 250px;
}

jsfiddleを参照してください。

これと同じ質問かもしれないことに気付きましたが、 #zone_tabsを追加するという答えはfloat: left;ヘッダーの高さを修正しますが、タブを左の列の終わりまで押し下げます。(左側の列が十分に大きい場合にそうします: jsfiddle では 250px です。指定されている両方の場所で 100px に減らすと、タブは意図した場所を見つけます。)

それで、誰か私を助けて、なぜこれがすべて起こるのか説明してもらえますか?

バージョン: Chrome 23 または Firefox 23、JQuery 1.8.2、JQuery UI 1.9.1