外側のdivの高さを入れ子のdivの高さに自動的に合わせたい

外側のdivの高さを入れ子のdivの高さに自動的に合わせたい

添付画像のようなコンテンツを作成しています。
外側のdiv(contents_box）内にcontents_imgとcontents_textのdivを配置しています。
このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう？
高さをautoですとただの棒のようになってしまい、ダメでした。
どうぞよろしくお願い致します。

xhtml

<div id="contents_box">
<div id="contents_img">ここに画像</div>
<div id="contents_text"> ここにテキスト</div>
</div>

css
#contents_box {
height: auto;
width: 805px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #333;
}

#contents_img {
height: auto;
width: 300px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
float: left;
}

#contents_text {
height: auto;
width: 485px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 10px;
float: right;
text-align: justify;
}

No.1 ベストアンサー 回答者： naokita 回答日時： 2010/10/25 00:46

クリアーしていないって事かな・・・　色々方法はあるけど。

----------------

<div id="contents_box">
<div id="contents_img">ここに画像</div>
<div id="contents_text"> ここにテキスト</div>
<hr /> <!-- 追加 -->
</div>



#contents_box {
width: 805px;
}
#contents_box hr { clear: both;} /* 追加 */

#contents_img {
width: 300px;
margin: 10px 0;
float: left;
}

#contents_text {
width: 485px;
margin: 10px 0;
float: right;
text-align: justify;
}

この回答へのお礼

ありがとうございました。
clear: bothと言うタグが高さを変動するキーになるのでしょうか？
ともかく出来ました。
ありがとうございました。

お礼日時：2010/10/26 21:02

No.2 回答者： yasu_0_0 回答日時： 2010/10/25 23:12

floatをかけるとその全体を包むボックスは消えてしまいます、なので、floatを解除して全体を包むcontents_boxを拡張しなければいけません。

HTML側の
<div id="contents_box">という部分に

<div id="contents_box" class="clearfix">と書き加えてください。

そして
CSS側で

.​c​l​e​a​r​f​i​x​:​a​f​t​e​r​ ​{
​c​o​n​t​e​n​t​:​ ​"​.​"​;​ ​/​*​ ​新​し​い​要​素​を​作​る​ ​*​/
​d​i​s​p​l​a​y​:​ ​b​l​o​c​k​;​ ​/​*​ ​ブ​ロ​ッ​ク​レ​ベ​ル​要​素​に​ ​*​/
​c​l​e​a​r​:​ ​b​o​t​h​;
​h​e​i​g​h​t​:​ ​0​;
​v​i​s​i​b​i​l​i​t​y​:​ ​h​i​d​d​e​n​;
​}

​.​c​l​e​a​r​f​i​x​ ​{
​m​i​n​-​h​e​i​g​h​t​:​ ​1​p​x​;
​}

​*​ ​h​t​m​l​ ​.​c​l​e​a​r​f​i​x​ ​{
​h​e​i​g​h​t​:​ ​1​p​x​;
​/​*​\​*​/​/​*​/
​h​e​i​g​h​t​:​ ​a​u​t​o​;
​o​v​e​r​f​l​o​w​:​ ​h​i​d​d​e​n​;
​/​*​*​/
​}

と書き加えてください。これでなおると思います。

これはクリアーフィックスという手法です、詳しい解説は名前を検索すればでてきます。

この回答へのお礼

ありがとうございました。
ちゃんと手法があったんですね。にしてもまだまだ初心者なので、ちょっと難しく感じます。
下の方のと両方試してみて、どちらが適しているか検討してみます。

お礼日時：2010/10/26 21:04