フロートとマージンの実験-1
詳しくは説明エントリへ。
- 左のボックス
- 右のボックス
- (1) まずは、ボックスを並べてみる。左のボックスのみfloat: leftをし、右のボックスはなにも指定せず。UAによって挙動バラバラ。使えない。
- 左のボックス
- 右のボックス
- (2) 左右どちらのボックスもfloat: leftをする。どれも同じになる。以下すべてこの条件を用いる。
- 左のボックス
- 右のボックス
- (3) ボックスの間を開けたいとしよう。左のボックスでmargin-right: 100pxをしてみる。大丈夫。
- 左のボックス
- 右のボックス
- (4) 今度は、右のボックスでmargin-left: 100px。これも大丈夫。
- 左のボックス
- 右のボックス
- (5) 左のボックスでmargin-right: 50px。右のボックスでmargin-left: 50px。大丈夫。marginが相殺されたりはしない。
- 左のボックス
- 右のボックス
- (6) 今度は、左のボックスの左側にも間を空けたいとしよう。両方ともmargin-left: 100pxにしてみると、IE6だけ左のボックスのmargin-leftが倍になる。使えない。
- 左のボックス
- 右のボックス
- (7) ボックスの開始する座標を100pxずらすとうまくいく。