ＣＳＳ－heightの自動調節について

質問

ＣＳＳを使いホームページ作成をしております。

一番上にロゴやフラッシュ、メニューを置き、その下の
#mainという<div>の中に、#sideと#textの２つの<div>を横に並ばせ入れ込んでいるのですが、
#main全体の高さを、背景入りで、文字に合わせて自動調節したいと思っています。
しかし#mainのＣＳＳにheight:auto;を書き込んでも表示されません。
普通はheightは指定しなくても自動で調節されるものだと思っていたのですが、できなかったのでautoと書いたのですがダメでした。

heightをピクセルで指定すると表示されますが、文字を飛び越えて表示されてしまいます。
解る方どうかご回答お願い致します。

ＣＳＳについては初心者のため記述がおかしい部分もあるかもしれませんが、ＨＴＭＬとＣＳＳは以下の通りです。

【ＨＴＭＬ】
<div id="main">

<div id="side">
<p>左サイド</p>

</div><!--side end-->

<div id="text">
<p>右サイド</p>

</div><!--text end-->

</div><!--main end-->

【ＣＳＳ】

#main {
width:800px;
height:auto;
background: #ffffff;
margin-right: auto;
margin-left: auto;
margin-bottom:auto;
clear: both;

}

#side {
float:left;
width:170px;
margin-top:20px;

}

#text {
float:right;
width:600px;
margin-top:20px;

}

回答No.1

xs200

質問を読むと2列構成ですがCSSが3列構成になっています。
#textにあるfloat:rightを削除してください。