CSSで左右マージンをautoにすると、heightのautoが効かなくなるのですが・・・

質問

CSSで左右マージンをautoにすると、heightのautoが効かなくなります。私の場合、まず、bodyタグに対してマージン0とテキスト中央ぞろえを行い、その後大枠の「wrapper」divで800×600位を設定し、
中にコンテンツ要素を挿入した後、大枠の「wrapper」のheightをautoに設定しなおします。すると、コンテンツ要素が大枠の「wrapper」から飛び出し、大変なことになってしまいます。しかしながら、大枠の「wrapper」にフロート設定をすると、heightのautoが機能します。
宣言文を変えてみても同じ現象が発生しますが、どなたかこの問題に関して、左右のautoで中央揃えにし、heightのautoでコンテンツを追加しても「wrapper」がきちんと伸びていく設定を共存させる手法をご存知の方がいらっしゃいましたら、ご教授願えますと幸いです。
宜しくお願いします。

回答No.2

leap_day · ベストアンサー

こんにちは

・・・コンテンツにfloat指定していません？
float解除するところに<div style="clear:both;"></div>とか入れれば直ると思いますが・・・

<style type="text/css">
body {
margin:0px;
}
#wrapper {
margin:auto;
width:800px;
height:auto;
background-color:red;
}
#contents {
width:500px;
height:400px;
background-color:blue;
float:left;
}
</style>

<div id="wrapper">
<div id="contents">
</div>
<div style="clear:both;"></div>
</div>

お礼

有難う御座います。CSS（カスケーディングスタイルシート）での
clear:bothは知っており、試したつもりでいました。
再度、おしゃっられる通り設定してみたところ、ちゃんと表示されました。有難う御座います。

回答No.1

SAYKA

>800×600
この600を排除したらどうなるかな？

うまくいかないようなら別の技が有るけど(めんどい

補足

だめでした。
clear:bothで解決しました。
ご協力有難う御座いました。