IE6:floatとmargin

sample1

左マージン50pxをつけた縦横100pxのボックスを2つ用意し、上のボックスのみ左にフロートさせた。
正しく表示されれば2つのボックスの左辺が揃う。
しかしIE6で見ると左にフロートさせた上のボックスは、左のマージンが2倍になっていて左辺は揃わない。

対処法

フロートさせたボックスには同じ方向にマージンを付けないようにする。
位置の調整をしたければボックスの中の要素にmarginかpaddingを指定して調整するか、新たなボックスで囲んでそこにmarginかpaddingを指定すればいい。

sample2

フロートさせたボックスには同じ方向にマージンを付けないようにすればいいのなら、フロートした方向とは逆側にマージンをつけたらどうか。
この方法で対処できなくは無いが、実は罠があったりする。
ある条件下ではフロートした方向とは逆にマージンをつけても指定した値分だけ余白が増えてしまう。
これはひまわりれいよんで画像リンクをテキストに回り込ませて配置させようとした時にIE6ではまった。

左にフロート(float:left)させた左右のボックスに右のマージン50px(margin-right:50px)を付けてdiv要素で囲んだ。
囲みに使用しているdiv要素は範囲が分かるように背景を青色にし、正しく表示される時の幅の値を指定。
下の場合では、ボックスは横並びになり各々に50pxのマージンが付いているので
100xp x 2 + 50px x 2 = 300px分の幅を取っている。

IE6でみると、2つのボックスを囲んでいるdiv要素の幅が50px拡張されてしまっている。
橙色のボックスが緑色のボックスの下に落っこちていない事から、橙色のボックスのマージンが2倍になっている訳では無さそうだ。
外側のdiv要素にpaddingを指定したときと挙動が似ている事から、外側のdiv要素にpadding的な余白が発生しているらしい。

マージン有り無し、無し有り2パターンを試してみた。

sample3

sample4

sample5

ボックス1にmarginを指定したsample3では謎の余白は発生していないのに対し、ボックス2にmarginを指定したsample4とボックスを1つに減らしたsample5では謎の余白が発生した。
ついでにsample2/3/4/5のフロートとマージンの向きを逆(float:right; margin-left:50px)にしてみたが、謎の余白は発生せず正しく表示された。

これらの事から、最後にフロート(float:left)で横並びにされたボックスに右のマージン(margin-right)を付けると、設定されたマージン分の余白が括っているボックスの右側に発生する。

対処法

フロートさせたボックスにはmargin自体つけない。結局こうなった。
フロートで並べたボックスの位置を調整したければフロートの左右マージンが指定値より大きくなるの対処法と同じようにするか、position:absoluteで固めるのが無難。