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

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

要素を左右に隙間なく配置することができない

スタイルシートによるレイアウトで、「ボックス」を最重要 "概念" とするなら、floatは最重要 "テクニック" と言えるだろう。floatとは、後に続く要素を左右どちらかに回り込ませるためのものだが、この性質を利用して要素を横にピッタリ隙間なく並べようとするとなかなかうまくいかない。
[該当するブラウザ]
Windows／IE5.5、6.0

症状

この現象を検証するために、左右それぞれの半円画像を背景とするボックスを設定し、floatを使って横に配置した。意図するところは、左右ピッタリくっつけて完全な円にしたいということなのだが、Windows版のIEでは間に3ピクセルほどの隙間ができてしまう。（→サンプルページ1）

【スタイルシート】

#half-left-circle {
    width: 40px;
    height: 80px;
    background-image: url(circle_l.gif); 
    float: left;
}
#half-right-circle {
    width: 40px;
    height: 80px;
    background-image: url(circle_r.gif);
}

【HTML】

<div id="half-left-circle">&nbsp;</div>

<div id="half-right-circle">&nbsp;</div>

原因

もともとfloatは写真などの画像にテキストを回り込ませるような使い方を想定して作られたプロパティと思われるため、Windows版のIEではfloatさせる要素と回り込ませる要素の間に自動的にマージンをとってしまうようだ。

対策

floatを使うことを前提にした場合、次の2つの方法が考えられる。
(1) 右に配置する要素も左にfloatさせる（→サンプルページ2）

赤字は変更部分（HTMLは変更なし）
【スタイルシート】

#half-left-circle {
    width: 40px;
    height: 80px;
    background-image: url(circle_l.gif);
    float: left;
}
#half-right-circle {
    width: 40px;
    height: 80px;
    background-image: url(circle_r.gif);
    float: left;
}

(2) 右に配置する要素は右にfloatさせ、全体の幅を固定する（→サンプルページ3）

赤字は変更部分
【スタイルシート】

#full-circle {
    width: 80px;
}
#half-left-circle {
    width: 40px;
    height: 80px;
    background-image: url(circle_l.gif);
    float: left;
}
#half-right-circle {
    width: 40px;
    height: 80px;
    background-image: url(circle_r.gif);
    float: right;
}

【HTML】

<div id="full-circle">

<div id="half-circle-A">&nbsp;</div>

<div id="half-circle-B">&nbsp;</div>

</div>

(last modified: 09/12/2008)

TrackBack

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

Comments

kikky wrote:

もともとサンプルページ1で並んで表示されること自体もIEのバグなのでは？
http://kikky.net/pc/css_float_clear.html

(posted on 08/13/2007)

contents

CSS実験室

CSSトラブルシューティング

-- background関連 --

背景画像の位置指定では正確にセンタリングできない

-- float関連 --

-- ソースの記述 --

-- ボックス関連 --

-- 定義リスト関連 --

-- 標準モードと互換モード --

フォントサイズの指定がテーブル内に継承されない

feed

RSS2.0
ATOM

このサイトは、Creative Commons License のもとにライセンスされています。