解 説

2カラムのレイアウト作成

2カラムレイアウトで基本的なレイアウトを作成する例です。固定幅の場合と可変幅の場合、そして固定幅と可変幅の場合をそれぞれ紹介します。

固定幅の場合

これはfloatで2カラムにしたものです。ボックスモデルの計算を正しく行って作成するだけです。

サンプル
HTML

CSS

可変幅の場合

サンプル
可変幅の場合は幅の指定をパーセントに変更しただけです。
CSS

可変幅と固定幅混合の場合

うまくいかない例

サンプル
困るのはこのパターンです。
片一方を可変幅でパーセント指定して、もう片方を固定幅でpx指定した場合カラム落ちが発生します。
CSS

解決策の例

サンプル
解決方法はいくつかあると思いますが、今回はネガティブマージンを使用した方法です。
右方向のネガティブマージンは自分自身は動かずに右隣のオブジェクトを引き込む性質があります。
これを利用して#subをその幅だけネガティブマージンで引っ張り込んでカラム落ちを防ぎます。
main領域にsubが引き込まれるためその分だけ余白が必要になります。そこでdiv#innerを用意して余白を作成します。
CSS

HTML