内容を反映したラッパーサイズ

Question

Take a look at this Fiddle

なぜ#wrapperがその内部のdivに対応するために展開しないのか困惑しています。ここには何が欠けていますか？

なぜ、私の<hr>が正しく表示されないのですか？

Answer 1

内部のアイテムがフローティングであり、ドキュメントの自然な流れから取り除かれているため、ラッパーは展開されません。

あなたはラッパの最後に、ブロックレベル要素を追加し、すべてのフロートをクリアするためにそれを伝えることで、フローティング要素を過ぎて展開するラッパーを伝えることができます。

#wrapper:after{ 
    content:"."; 
    display:block; 
    clear:both; 
    visibility:hidden; 
} 

また、あなたはの高さを有していましたラッパーは100ピクセルに設定されます。

ここにあなたのフィドルの更新バージョンです：あなたのhr用としてhttp://jsfiddle.net/kWJ79/9/

は、正確に何をやりたいと思っていますか？ 2つのdivの間に縦棒を作成したいと思うようです。これは正しいです？

UPDATE

あなたは私がわずかに異なるルートを検討したい、左右のdivの間に線を作成したいとしている場合。

左のdivは、右側のパディング、マージン、境界線を持つ独自のコンテナ内に配置します。こうすることで、コード内に冗長なdivが浮かび上がることなく、hrを使用する必要性が再認識されます。私は#left DIVからfloat:left;を削除し、代わりに#left_wrapperの上に配置したhttp://jsfiddle.net/kWJ79/15/

#left_wrapper{ 
    margin-right:5px; 
    padding-right: 5px; 
    border-right:1px solid red; 
    float:left; 
} 

お知らせ：

ここでは、この例での更新フィドルです。

Answer 2

高さの値を指定しました。