html - 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>

</ p>

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;
}

上記の場合、<div id="page">高さが0pxのように見えます。コンテンツをワープさせるにはどうすればよいですか？

私はCSSを初めて使用するので、何が間違っているのか説明してください。ありがとう

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