floatすると親ボックスからはみでる

質問

文字を写真（もしくは文字のボックス）に周りこませ、それを外のボックスの罫で囲みたいと思っているのですが、文字が短く、写真が長いと写真部分のボックスが外のボックスからはみ出てしまします。（文章が長いとうまくいくのですが。。）長いほうにあわせて外枠で囲める方法はないでしょうか？
よろしくお願いします。
<style type="text/css">
<!--
/*枠*/
.waku{
border: 2px #ffdddd solid;
}
.right{
width: 132px;
float: right;
background:#CCFFCC;
}
-->
</style>

<DIV class="waku">
<DIV class="right">
test<br>test
</div>
test
</DIV>

回答No.2

noname#127257 · ベストアンサー

No1さんご紹介のサイトに説明されている通りです。
手っ取り早いのは、フッターのようなブロックを入れる事です。

<DIV class="waku">
<DIV class="right">
test<br>test
</div>
test
<div style="clear:both;">著作権表示など</div>
</DIV>

「div style～」の部分は、直接スタイルを入れずに class を作って指定でも構いません。
「著作権表示など」の文字の部分は、空っぽでもはみ出さずに表示はされます。ただし、見た目だけのために空の div を入れるのは何となくスッキリしないので、うまく利用できるほうが良いような気がします。

お礼

あまり時間がなかったのでこの方法を
とらせてもらいました。おかげで解決できました！
ありがとうございます。

回答No.1

steel_gray

対処方法は状況によっていくつかあります。
http://www.geocities.jp/multi_column/float/05.html
こちらの「コンテナの高さを確保するには」という部分をご覧になって、
状況に合った方法をどうぞ。
（ページtopから6割りぐらい下にスクロールした部分）

お礼

ありがごうございます。
floatには前から悩んでいたので
こちらのサイトで勉強します。