左と中央カラムのコンテナ:後から記述する右側カラムに float:right を指定しているので、この要素は左側に回りこむ
先に記述したい中央カラム
周囲に<margin: 20px>をとった<p>要素: 親の div要素に float属性を付けているのでマージンの相殺が起きない。
後に記述したけれど左にしたいカラム
周囲に<margin: 20px>をとった<p>要素
左・中央カラムの下に記述したい要素 clear: left; を指定
右側カラム float: rightを指定
周囲に<margin: 20px>をとった<p>要素
一旦全てのフロートをリセットするための div要素 clear: both; を指定
左と中央カラムのコンテナ-2
先に記述したい中央カラム-2
周囲に<margin: 20px>をとった<p>要素: 親の div要素に float属性を付けているのでマージンの相殺が起きない。
後に記述したけれど左にしたいカラム-2
周囲に<margin: 20px>をとった<p>要素
左・中央カラムの下に記述したい要素 clear: left; を指定
右側カラム-2
周囲に<margin: 20px>をとった<p>要素