CSS floatプロパティの高さが表示されませんか？

Question

私はCSSにかなり新しいですので、これは愚かに見えるかもしれません：CSSで

を、私はコンテンツを配置するfloat:leftにプロパティを使用するには、今、隣の要素に委ね、私はすべての要素のコンテナを持っていますfloatプロパティを持つ。どのようにして子育て要素をその内容に応じて高さを調整するのですか？

HTML：上記と

<div id="page"> 
<div id="side"> 
    <p>my sidebar</p> 
</div> 
<div id="content"> 
    <p>my content</p> 
    <p>my content1</p> 
    <p>my content2</p> 
    <p>my content3</p> 
</div> 

CSS

/* the "border:3px solid #000;" are used to make the div border visble*/ 
#page{ 
position:relative; 
width:400px; 
background-color: #F4F0EC; 
border:3px solid #000; 
} 
#side{ 

border:3px solid #000; 
float:left; 
} 
#content{ 
float:left; 
border:3px solid #000; 
} 

それは0PXの高さを持っているように、<div id="page">を見て....どのように私は作るのですかそれは内容を歪ませる??

私はCSSに新たなんだから、私が間違っているのかを説明してください、ありがとう

フィドル：http://jsfiddle.net/AuSmP/

Answer 1

あなたはそれがその内容に合わせてサイズを変更できるようになりますあなたのdiv #pageためoverflow:hiddenを追加することができます。

See Working Demo.

Learn more about overflow property.

代わりに、あなたも同じことを達成するために<div class="clear"></div>、その後CSS.clear{clear:both;}を追加することができます。

See Demo.

Answer 2

絶対に相対からの位置を変更すると、このJSFiddle Demo

Answer 3

が、これはあなたが期待したものです
チェックアウトあなたを助けることができますか？ http://jsfiddle.net/AuSmP/4/ float：left styleを#pageに追加すると、そのトリックを修正することができます。また、clearを使用することもできます。