html - 下の境界線が上の境界線を上書きしない

Question

画面の一連のタブを作成しています。左側のdivは、上部の境界線に関して、右側のdivとは異なる動作をします。

2つの列として機能する2つのdivの上に、順序付けられていないリスト（ul）があります。プレゼンテーションを支援するために、2つのdivの上部の境界線を使用して、これがコンテンツであるという印象をユーザーに与えます。プレゼンテーションをさらに支援するために、アクティブなタブの下の境界線を白に設定して、タブの下に境界線がなく、タブとコンテンツ領域が同じスペースになっているように見せます。私が抱えている問題は、タブの下の境界線が右側の列をオーバーライドしますが、左側はオーバーライドしませんが、右側では上部が下部をオーバーライドすることです。

http://jsfiddle.net/z39zV/

要件の1つは右の列を拡張することであるため、画面に問題が表示されるようにするには、画面サイズを調整する必要があります。

IE、Chrome、FFでこれを試しましたが、すべて同じものが表示されます。左の列にはフロートが残っているので、おそらくそれと関係がありますが、私は何を理解することができません！

Answer 1

順序付けられていないリストの position プロパティを relative に設定して、スタックの上位に配置することができます。これがフィドルです。

http://jsfiddle.net/z39zV/4/

また、境界線を a 要素からその親要素である li 要素に移動し、下の 2 つの div を完全な境界線を持つ 1 つの div にラップすることもお勧めします。

Answer 2

jsfiddle を更新しました:

http://jsfiddle.net/z39zV/1/

両方の列をフローティングしていませんでした。これが主な問題でした:

   .column_container_left {
        float: left;
        width: 200px;
        border-top:thin solid grey;                    
        border-bottom:thin solid grey;    
        border-left:thin solid grey;
        background-color: white;
        height: 500px;
    }

    .column_container_right {
        float: left;
        width: 200px;
        border-top:thin solid grey;                    
        border-bottom:thin solid grey;    
        border-right:thin solid grey;
        background-color: white;
        height: 500px;
    }