スタイルシートをめぐる冒険

CSSトラブルシューティング / float関連

floatと一緒にwidthも指定しないと回り込まない

ある要素にfloatを指定するときは、一緒にwidthも指定するのが基本的ルールである。実際、widthを指定しないとどんな不具合が起きるのか、それを検証してみたい。
[該当するブラウザ]
Macintosh／IE5.0、IE5.1

症状

widthを指定しないことによる不具合はいくつかあると思うが、ここでは2つのケースを取り上げる。

ひとつは、floatさせたいボックスにtext-alignを指定した場合。たとえば、画像の下にキャプションを右揃えで入れ、その左側に本文を回り込ませたいときなどだ。この形にするためには、画像とキャプションを含むボックスにfloat:rightとtext-align:rightを指定することになるが、そうした時、Macintosh版IEでは本文が回り込まずに画像の下に来てしまう（→サンプルページ1）。これは、text-align:centerとしても同様である。

もうひとつは、divタグを入れ子にした場合。上記と同じケースで、さらに画像とキャプションの間隔も細かく指定したいときなどは、画像を含むボックスの中にさらにキャプションを含むボックスを入れ、画像とのマージンを設定することになるが、この場合もMacintosh版IEでは本文が回り込まない（→サンプルページ2）。

●サンプルページ1
【スタイルシート】

.content {
    width: 200px;
}
.float-content {
    float: right;
    font-size: 84%;
    text-align: right;
}

【HTML】

<div class="content">

<div class="float-content">

<img src="square.gif" alt="" width="80" height="70"><br>

キャプション

</div>

この例では、画像Aとキャプションを含むボックスにfloat:rightとtext-align:rightを指定している。

</div>

●サンプルページ2
【スタイルシート】

.content {
    width: 200px;
}
.float-content {
    float: right;
}
.caption {
    margin-top: 3px;
    font-size: 84%;
    text-align: right;
}

【HTML】

<div class="content">

<div class="float-content">

<img src="square.gif" alt="" width="80" height="70">

<div class="caption">キャプション</div>

</div>

こちらは、divタグを入れ子にして、キャプションの部分にだけtext-align:rightを指定している。

</div>

原因と対策

最初からタネを明かしているように、いずれもwidthを指定すれば解決する（→サンプルページ3／サンプルページ4）。

●サンプルページ3
【スタイルシート】

.content {
    width: 200px;
}
.float-content {
    width: 80px;
    float: right;
    font-size: 84%;
    text-align: right;
}

●サンプルページ4
【スタイルシート】

.content {
    width: 200px;
}
.float-content {
    width: 80px;
    float: right;
}
.caption {
    margin-top: 3px;
    font-size: 84%;
    text-align: right;
}

(last modified: 09/12/2008)

TrackBack

このエントリーのトラックバックURL:
http://norisfactory.com/mt/mt-tb.cgi/6

» 非置換要素の幅を明示せずにフロート from "terkel.jp"
CSS で非置換要素 (img とか objectとかフォームのコントロール系とか以外、ってことね) に float プロパティを指定する場合、同時に幅を... [read more]

(tracked on 06/28/2009)