CSSテクニックコミュのfloatでの画像の回り込みについて

現在xhtmlとcssでのサイト作成の練習をしております。
div内で画像をテキストに回り込ませているのですが、
テキストが画像縦幅より少ないためdivの外へ画像がはみ出す現象が起きています。
これの解決策として、<br>にclearの設定をして挿入という手法をネットでよく見かけます。
実際挿入してみると、FFやsafariでは適用されているのですが、WINのIE5.x～6は期待通りの見た目になりません。
（単にbr一つ分伸びただけのようですし、さらに伸びた分、marginを無視？して下のh3とくっついてしまっています)
そこで、divを二重にして、内側のdivにwidth:100%;指定をしてみたところ、
今度はIEでもFFと同じ表示になりました。
ただ、やはりbrが入ったせいか、下に余分な空白ができてしまいました。
pからmargin等の設定を抜いてもテキスト量が画像縦幅を超えるとやはり文字の下に余白がでてきます。
この状態はどのようにすれば上下同じだけの空白を空けて、かつはみ出さずに済むのでしょうか。
やはり、brでのclear指定自体がそもそも問題なのでしょうか？
拙いソースで申し訳ないですが、もし解決策をご存知の方いらっしゃいましたら、ご教授いただけますと幸いです。

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

【xhtmlソース】

<?xml version="1.0" encoding="shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="content-style-type" content="text/css" />
<title>テスト</title>
<link rel="stylesheet" type="text/css" href="test.css" media="print, screen, tv" />
</head>

<body>
<div id="body">
<div id="main">

<h3>テストテスト</h3>
<div class="contents">
<div class="width_div">
<p>
<img src="testimg.jpg" alt="" width="200" height="159" class="right_img" />
テストですテストですテストですテストですテストですテストですテストですテストですテストです
</p>
<p>
テストですテストですテストですテストですテストですテストですテストですテストですテストですテストですテストですテストですテストですテストですテストですテストです
</p>
<p>
テストですテストですテストですテストですテストですテストですテストですテストですテストです
</p>
<br class="div_height" />
</div>
</div>

<h3>テストテスト</h3>
<div class="contents">
<div class="width_div">
<p>
<img src="testimg.jpg" alt="" width="200" height="159" class="right_img" />
テストですテストですテストですテストですテストですテストですテストですテストですテストです
</p>
<br class="div_height" />
</div>
</div>

</div>
</div>
</body>
</html>

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

【cssソース】

* {
margin: 0; padding: 0;
color:#333333;
}

#body{
width:750px;
}

#main{
border:1px solid #ccc;
margin-left:6px;
padding:20px 16px 0 16px;
}

h3{
background-color:#33CCFF;
padding:5px;
margin-bottom:10px;
border-left:solid 5px #87AECB;
font-size:90%;
}

.contents{
border:1px solid #999;
padding:10px;
margin-bottom:20px;
}

.width_div{
width:100%;
}

.right_img{
float:right;
margin-left:10px;
vertical-align:top;
border:0;
}

.div_height{
clear:both;
}

p{
line-height:1.3em;
margin-bottom:10px;
font-size:80%;
}

コメント(12)

最初
全て
最新の40件

[3] mixiユーザー 05月11日 16:03

＞えりさん
早速やってみました。brのときの余白がなくなりました！
heightの1pxやoverflowは無くても問題ないようですが、これが必要な場合があるのでしょうか？

＞Nao7さん
えりさんのpタグにプラスpaddingのbottomを0にしたら、margin分の空きも綺麗に消えました。
ただ、macのほうでテキストが少ない場合に下が完全にくっついてしまったため、
一番下の段落のpにmargin-bottom:-10px指定することでWINと同じ表示にすることができました。

皆さまのレスのおかげでなんとか表示は希望通りのものになりました。本当にありがとうございます。
ただソースが煩雑になってしまった感も否めず、<p>を空要素にするのも個人的にちょっと抵抗があったりして、
希望通りの見た目と希望通りのソースを両立させるのは難しいのだな。。と感じています。
ともあれ、とても勉強になりました。ありがとうございました。

[4] mixiユーザー 05月11日 16:57

解決したみたいですが・・・
--------------------------------------------------
<div class="contents">
<p>
<img src="testimg.jpg" alt="" width="200" height="159" class="right_img" />
テストですテストですテストですテストですテストですテストですテストですテストですテストです
</p>
</div>
--------------------------------------------------
と、内側の <div class="width_div"> を削除して
クラスの .contents に width:700px; と指定したらダメですか？

.contents{
border:1px solid #999;
padding:10px;
margin-bottom:20px;
width:700px;
}

[6] mixiユーザー 05月11日 18:53

私がfloatを使う時は、
かならずfloatのDIVが終わった所に「<div class="bottom"><hr /></div>」を入れて、
divにclear:left
hrにdysplay:none
を指定して、崩れを防止しています。

例：
#floatbox1{float:lefft;}
#floatbox2{float:lefft;}
#bottom{clear:both;}
#bottom hr{display:none;}
----
<div id="floatbox1">ほげほげ</div>
<div id="floatbox2">ほげほげ</div>
<div id="bottom"><hr /></div>

崩れ防止なだけではなく、
CSSが効かない環境で見た場合に、
コンテンツの区切りがHRで分かりやすいかなーと思い
こういう方法をとってます。

[8] mixiユーザー 05月12日 00:21

>5: えりさん
ちょっと気になったんですが、
<br>自体は非推奨じゃないっすよね？

<br>のclear属性が非推奨ってのは知っているんですが。

[9] mixiユーザー 05月12日 00:28

> ゅぇさん
自分もhr使いますが、その外のdivって必要ですか？
hr{
clear:both;
visibility:hidden;
height:1px;
padding:0;
}
っていつも書いてますよ。

[12] mixiユーザー 05月12日 03:30

私の場合は、これを追加してfloat系は対処しています。

.width_div {
/* other mac ie \*/
height: 1%;
/* other mac ie end */
}
.width_div:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

外枠になるもの（div以外でもulとか）に追記すればfloat系解消できるので便利ですよ。

ログインすると、みんなのコメントがもっと見れるよ