css - CSSBorderはフロートされたアイテムをラップアラウンドしません

Question

2列のレイアウトを作成しようとしています。左の列はナビゲーションメニュー、右の列はコンテンツです。

問題は、すべてのコンテンツを折り返す境界線が右の列のコンテンツのみを折り返すのに対し、左の列のナビゲーションメニューは視覚的にdivの境界線から外れることです。

JSfiddle： http: //jsfiddle.net/ekeWz/

これを回避することは可能ですか？

Answer 1

ねえ、このようにあなたのcssの#wrapperに与えてください overflow:hidden;

#wrapper {
overflow:hidden;}

ライブデモ

Answer 2

overflow:hidden;親のdivまたは#wrapperdivにを与えることで目的の結果を得ることができます

http://jsfiddle.net/ekeWz/6/

Answer 3

私はこれがあなたが望むものだと思います：

#wrapper {
    width: 600px;
    float: left;
    border: 1px solid black;}
#left_menu {
    float: left;
    border-right: 1px solid blue;}
    width: 25%;}

left_menuにfloatを残してdivのフローを中断したら、同じfloatで親divのフローを調整する必要があります。