CSSでの段組

押さえておきたいdiv要素の特性

1. 位置が指定されていない場合、直前に配置されたdiv要素の下に配置される。
   1. 直前の要素に「回り込み」が指定されていて自身に設定されていない場合、その要素とは重なるように配置され、オブジェクトのみ横に回り込む。
   2. 直前の要素と自身に「回り込み」が指定されている場合、直前の要素とは重ならないように横に回り込む。
2. 位置が「絶対（position: absolute）」の場合
   1. 表示位置は、親要素の「位置（position）」プロパティを基準とする。親要素に位置（position）の指定がない場合、親要素を基準とするかウインドウを基準とするかは、ブラウザによって異なる。
   2. 子要素を除く他のdiv要素から無視される。
3. 幅が指定されていなければ、親要素に対して出来るだけ幅広くスペースを取ろうとする。
4. 高さが指定されていないか自動（auto）の場合、子要素のサイズで大きさが決まる。
   1. 回り込みの指定がある、もしくは位置が絶対の子要素しかない場合、高さは0になる。
   2. どちらでもない場合、その要素の高さかそこに含まれるオブジェクトのサイズで決まる。
5. ・回り込みの指定は、同一要素内でない（同じ親要素を持たない）要素とは干渉しない。

サンプル「4Box 2段組み」

ウインドウ中央配置、分割スクロール無し、幅700px固定、縦成り行き。
段組1-2-1（ヘッダー＆メイン2分割＆フッター）

┏━━━━━━━━━━━━━━┓【#base】
┃┌────────────┐┃【#header】
┃└────────────┘┃
┃┌────────────┐┃【#main】
┃│┌──┐┌──────┐│┃【#navigation】【#contents】
┃│└──┘└──────┘│┃
┃└────────────┘┃
┃┌────────────┐┃【#footer】
┃└────────────┘┃
┗━━━━━━━━━━━━━━┛

ベースは、横幅のみ指定。位置指定「指定無し」。左右にマージン「自動（auto）」を指定することで、中央に配置する。

【#header】【#body】【#footer】は（縦に順に並ぶだけなので）位置、回り込み指定ともに無し。横幅も指定無で【#base】いっぱいになるため、指定なし。縦幅は成り行きにするため、指定無し。

メイン内は二分割されていて横に並ぶため、【#navigation】【#contents】共に回り込み「左」の指定をする。

…これでいけそうなものだが、一つ問題がある。メイン内の2つの要素【#navigation】【#contents】に回り込みを設定すると、【#main】の縦幅を算出できる要素がないため（前述「押さえておきたいdiv要素の特性／1-i」参照）、レイアウト崩れが起きる（【#main】のない部分を【#footer】が塗りつぶそうとする）。

コレを解決するためには、以下のようにする。

1. 【#navigation】【#contents】の回り込みを解除（「変更無し」に）。
2. 【#navigation】の位置を「絶対（position: absolute）」にし、上左方向の位置を入力。左は「0」、上方向は【#header】の縦幅。
   ※【#header】の縦幅はpxで固定（ここにはテキストを配置しないことにする）。
   ※絶対で指定する場合、親要素にpositionの指定がないと、ブラウザによってブラウザの端からになったり、親祖要素からになったりするため、【#base】の位置指定を「相対（position: relative）」にする。
3. 【#contents】が【#navigation】と重なるため、【#contents】の左マージンに【#navigation】と同じ幅を入力してずらす。
4. コンテンツの少ない【#navigation】の下に空きスペースができてしまう。そこで、【#navigation】と【#main】の色を同じにして、開きを目立たなくさせる（笑）。

完成見本（ソース）

* {　※省略　}
body {　※省略　}
#base { margin: 0 auto; padding: 0; position: relative; width: 700px }
#header { background-color: gray; margin: 0; padding: 0; height: 60px }
#main { background-color: silver; margin: 0; padding: 0 }
#navigation { background-color: silver; margin: 0; padding: 0; position: absolute; top: 60px; left: 0; width: 200px }
#contents { background-color: white; margin: 0 0 0 200px; padding: 0; width: 500px }
#footer { background-color: gray; text-align: center; margin: 0; padding: 0 }

上記サンプルの場合、幅は700pxで固定（【#header】は60px、【#navigation】は200px、【#contents】は500px）してある。縦幅は、テキストなどのコンテンツの量に応じて変化する。【#footer】はなにげにセンタリングして使うことが多いので、テキスト配置を中央揃えにしてある。

注意

• 【#navigation】のコンテンツが、【#contents】より少ないことが前提。逆になると、【#navigation】のボックスが【#footer】にはみ出すため要注意。
• 段落やh系にはマージンの指定があるため、divボックスの端から記述をスタートした場合、そのマージンが干渉してdivボックスの配置が崩れることがある。したがって、崩したくない枠組みのボックスの縁いっぱいにテキストを記述せず、必ずマージンをとるようにすること。
• フロートで構築した場合の崩れを解決するためには、mainの縦幅を固定する方法もあるが、ブラウザで文字サイズなどを変更した場合（OperaやFirefox、Safariなど）にレイアウトが崩れる。
• Safari、Opera、Firefoxでは、相対的設定のdivブロックのマージンの上下に0以外の数値を入れるとバグるため、マージン用divブロックの上下のマージンは「0px」として、代わりに上下のパディングにマージン値を設定する。

---