【css】floatを指定するとはみ出します

質問

ブロック要素をfioatで横並びにした際に、画像とテキストが全体を囲っている要素（親要素）からはみ出すことが多々あります。
その度に高さを指定して回避しているのですが、こちらはその他に回避の方法というのはあるのでしょうか？
それとも、自分の記述がおかしいのでしょうか？

例えば下記の例です。
こちらは左に画像、右にタイトルとコメントが入ります。

<div class="aaa">

<div class="left"><img src="photo.jpg" width="180" height="120"></div>

<div class="right">
<h3 class="title">タイトルです</h3>
<div class="comment">コメントです</div>
</div>

</div>

////////////////////////////////////

.aaa{
margin-bottom: 5px;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 7px;
padding-left: 10px;
clear: both;
}
.left{
float: left;
height: 120px;
width: 180px;
}
.right{
float: left;
padding-left: 10px;
width: 380px;
}
.title{
font-size: 90%;
line-height: 120%;
padding-right: 10px;
padding-left: 10px;
width: 360px;
padding-top: 3px;
padding-bottom: 1px;
clear: both;
}
.comment{
font-size: 80%;
line-height: 120%;
padding: 5px;
clear: both;
}

回答No.3

leap_day

こんにちは

floatを解除させるところに

<div style="clear:both;"></div>

と空要素を1行入れることで親要素の高さを得ることが出来ます

＝＞　.aaa、.title、.comment のclear:both;はあまり必要ないと思います

<div class="aaa">
<div class="left"></div>
<div class="right">
<div class="title></div>
<div class="comment"></div>
</div>
<div style="clear:both;"></div>
</div>

他にもclearfix hackを使ったりでできると思います
http://mb.blog7.fc2.com/blog-entry-62.html
http://www.fsiki.com/archive/css-doc/float.html

お礼

上記で解決できました。
ありがとうございました。

<div style="clear:both;"></div>
の場合では、Dreamweaver上でも高さを得ることができますね。
ですが、空要素はあまり使いたくないので、
http://www.fsiki.com/archive/css-doc/float.html​
こちらのサイトを参考にさせて頂きました。

回答No.2

borazu

これでどんなですか？？

.aaa{
zoom:100%; ← 追加
}

参考URLへFirefox，IE7，IE6などの対処法が載っていますよ。

参考URL：

http://css.webcreativepark.net/tips7/

お礼

ありがとうございました。
上記のサイト、参考にさせて頂きました。

今まではCSSハック等を使ってブラウザ別に高さを指定していたりしたんですが、解決しそうです。

回答No.1

noname#56851

ブラウザの幅を狭めた時にタイトルとコメントが画像の下に回りこむことでしょうか。
それなら.aaaにwidth:570px;を書き加えれば良いです。

補足

補足しますと、

<div class="aaa"></div>
に背景色を付けた場合に、画像とテキストが背景色からはみ出てしまう現象です。
ブラウザ幅がフルサイズでもはみ出てしまいます。