画像の縦幅を確保するdivの作り方（CSS）

質問

こんにちは。以下のような体裁が下に
どんどん繰り返される体裁のページを作っています。
□はｐ要素で、■は９個で１つの画像、---は仕切り線です。
画像は「float:right」です。

□□□□□■■■
□□□□□■■■
□□□□□■■■
□□□□□□□□
----------------

仕切り線は全体をdivで囲み
その「border-bottom」で描くようにしています。

ただ、ｐ要素の文字量が少ない場合、以下のように
仕切り線が画像にかぶるような形になってしまいます。

□□□□□■■■
□□□□□■■■
----------■■■

これを下のようにしたいわけです。
「×」は空白です。

□□□□□■■■
□□□□□■■■
×××××■■■
----------------

どのようにCSS指定をすればよろしいのでしょうか？

なお、全体の「div」に画像分の「height」を
与えたところ、今度はｐ要素の文字数が
その仕切り線を越える場合、次の「div」ブロックと
文字がかぶるようになってしまい
うまくいきません（Operaのみ）。

回答No.2

Ysan · ベストアンサー

IEでは別のバグがありfloatしてclearすると
前の属性が見えなくなったり、高さが変になったりするバグがあるのでこんな感じで面倒な指定をしなければなりません
-----------------html------------------
<div>
<img 必要事項 />
<p>□□□□□</p>
<br style="clear:both">
</div>
-----------------CSS-------------------
div {height : *** ; border-bottom : dotted 2px blue;}
img {float: right;}
html>body div {height: auto;}

ポイントは
1.<br style="clear:both">のあとに文字を入れない（IEのバグの為）
2.CSSの height : *** ;には「画像の高さ＋上下borderの高さ」を入れる
（これもIE用）
3.CSSの最後に html>body div {height: auto;}を入れる
（これはIE以外のブラウザ用）

IEではバグのせいでdivの高さが画像+ボーダの高さ以上で認識され
その他のブラウザではAUTOが適用されるのでPの文章の分高さがのびます。
<br style="clear:both">で
IE以外のブラウザは画像の高さよりも小さくなることはありません。
ただし<br style="clear:both">の後に文字を入れるとIEで
Pの文字が見えなくなるバグがありますので気をつけてください

補足

ご回答ありがとうございました。
今しばらく、理解するための時間をください。
とり急ぎ、ご回答いただいたことのお礼まで。

回答No.3

Ysan

分かりにくいようなので補足です。
floatしてある子要素imgは、親要素のdivには認識できません。
それなので、ｐ要素の文字量が少ない場合はこうなってしまいます
Ｐ□□□□■■■
□□□□□■画■
----------■■■

しかし、同じ階層の要素pはimgを認識して左側に回り込んでいます。
これを利用して同じ階層の要素brにclear:～（回り込み解除）を指定して
imgの下にbrを持ってきます。
Ｐ□□□□■■■
□□□□□■画■
×××××■■■
ＢＲ
----------------

brはimgとpの下側にいるので、imgの方が高さがあるときはimgの真下に
pの方が高さがあるときはpの真下にあります。
子要素brは、親要素のdivには認識出来る（floatしてないので）
のでdivは一番下のbrの下にボーダを持ってきます。
（brがストッパーの様な感じ）

と標準にしたがっているブラウザはこれでいいのですが
ＩＥは変なんです。
<br style="clear:～">を入れると子要素imgを認識しなくなります。
（正確には<br style="clear:～">の後に何も要素がないとそうなる）
さらに、<br style="clear:～">の後に何か要素を入れると
前の要素Pが見えなくなるバグもあるし…。

IEはheightを指定しているとmin-height（最低の高さ）と勝手に
解釈するバグ（仕様？）もあるのでそれを利用し、
height : *** ;で最低の高さを指定します。

さらにIEは、html>bodyを認識しませんので
そこにheightを上書きしてauto（自動で高さを設定する）
にします。IE以外はheight:auto;と認識されます。

お礼

ご回答ありがとうございます。

> 分かりにくいようなので補足です。

あ、いえ、私の書き方が悪くご心配、お手数をおかけして
もうしわけありません。お教えいただいたことそのものは
とても分かりやすかったです。

実は「div」の縦幅を数値指定することで、
文字があふれる場合でもIEではきれいにいってたんです。
不勉強から、これが正しい動作だと完全に誤解していたもので、
いろいろと試したりして、理解を固める時間がほしかったのです。
キーワードもいただきましたので検索の幅も広がりました。
ありがとうございます。

なるほど、いろいろ変な動作をしますね。
バグについては意識にあり、以下のサイトは参考にしているのですが
CSSは始めたばかりで、まだ全部に目を通せていません。
http://members.at.infoseek.co.jp/cssbug/index.html
と、いいますか、まだバグまで頭が回らない（^-^）。

Ysanさんはその面に関しての知識が豊富でいらっしゃるとお見受けしますが
どういうところで情報を入手なさっているのでしょうか？
（あ、無視していただいてもかまいません）

ともかくも、おかげさまで当初望んでいたことは達成でき、
理解も深まり、深く感謝申し上げます。

もう少し検証したいことがあるのですが
一両日中には締め切れると思います。
何度もありがとうございました。

補足

補足欄にて失礼します。
皆さん、どうもありがとうございました。
問題の個所以外で、ちょっと複雑なことを
やっていたため、時間がかかり、すみませんでした。

１番さんにご紹介いただいたサイト、
たいへんためになり、今もほかのところを
読んでいます。

２・３番さんにお教えいただいたこと、
十分に理解できたのではないかと思います。
何度もご指導いただきありがとうございました。

ご親切を「評価する」などという発想は
わたしにはなじみませんので
ポイントは平等に１つのご回答に10ptということで
どうぞご容赦ください。

また機会がありましたら、よろしくお願いいたします。
ありがとうございました。

回答No.1

peapeapea

お書きになったCSSの詳細が分からないのですが、下記URLが参考にならないでしょうか。

参考URL：

http://www.mozilla.gr.jp/standards/webtips0021.html

お礼

あらためまして、ご回答ありがとうございました。

ページに書かれていた<br style="clear:both;">の手法が
私の場合は使えないようなので（＝floatを複数使っているため
解除してほしくないfloatまで解除されてしまう）
clearの再勉強をしたところ、
複数のfloatを左右に分け、一方のみを解除することで
求めていることが実現できました。
ありがとうございました。

…と、お礼にきたところ、あらっ？　２番さんによると
まだ考えなければいけないことがある？？？
もう少し勉強しなければいけないみたい…（T^T）

補足

ご回答ありがとうございました。

書いているコードはこんな感じです（簡略化してます）
----------------------------------------------
<div>
<img 必要事項 />
<p>□□□□□</p>
</div>
----------------------------------------------
div {height : *** ; border-bottom : dotted 2px blue;}
img {float: right;}
----------------------------------------------

この「height」を「auto」（無指定）にすると、
ｐの文字数が少ないときに画像がボックスからはみ出、
画像の縦幅で数値指定すると
文字数が多いときに文字のほうがはみ出てしまうわけです。

ただ、ご紹介いただいたサイトは参考になっており
いま、いろいろ検証している最中です。
ありがとうございます。