ボックスとその包含ブロック

以下のボックスにはheight:100pxを、それらの包含ブロックにはwidth:700pxと背景画像としてグリッドを設定してあります。 また、グリッドを見やすいように勧告前のプロパティを使ってボックスの透過処理を行っています。 IE6では意図どおりに表示されないので、FirefoxOperaSafariなどで確認してください。

A(通常フロー)

width : auto;
margin: 0 150px 10px;

B(右フロート)

float : right;
width : 300px;
margin: 10px 50px 0;

C(通常フロー)

width  : 500px;
margin : 100px auto 50px;

D(通常フロー)

width  : 300px;
margin : 50px 0 20px auto;

E(左フロート)

float : left;
width : 300px;
margin: 0;

F(通常フロー)

width  : auto;
margin : 50px 50px 0 350px;

G(絶対配置)

width   : 250px; height: 150px
position: absolute;
top     : 280px;
left    : 25px;
margin  : 0 0 0 25px;

H(右フロート)

float : right;
width : 300px;
margin: 0 -50px 0 0;