3カラム・レイアウトのコーディングの手順

  1. 各段の幅を設定。
  2. float を指定して2段組にする。
  3. float したボックス内でさらに float を指定する。

HTMLのコーディング

id=”contents” の中に、id=”main”,”left-side”,”right-side” の div を記述する。

div#main と div#left-side を div 要素で囲む。

CSS のコーディング

まず、各ボックスの位置がわかりやすいように、背景に色を付ける。

3カラム・レイアウトのコーディング

要素の幅を設定する。

#main を500px、左サイドを200px、右サイドを160pxとし、要素間の間隔を50pxとする。

div.wrap-contents は、

#main:500px + #left-side:200px + 間隔:50px = 750px

となる。

3カラム・レイアウトのコーディング

float 属性を設定する。

div.wrap-contents に、float: left; div#right-side に、float: right; を設定する。

float された要素は浮いてしまうため、親要素は子要素の高さを算出できなくなり、div#contents の高さが0になり、その下の要素が入り込んでしまう。

そのため、親要素(div#contents)に、overflow:hidden; を記述する。

IE 6/7 は、overflow:hidden; に対応していないため、IE 独自属性 zoom 属性を設定する。

width は、

div.wrap-contents 750px + div#right-side 160px + 要素間の間隔 40px = 950 px

を設定する。

3カラム・レイアウトのコーディング

overflow:hidden;

fioat を解除できる clearfix に比べ、指定する属性が少なく、気軽に使える。

ただし、ボックスからあふれる部分を隠すため、ボックスからはみ出る表現やドロップシャドウ、印刷が想定される場合には問題が生じやすいため、ケースバイケースで使い分ける必要がある。

div.wrap-contents 内を、float 属性で2段組にする。

3カラム・レイアウトのコーディング

完成。

3段組を実現する手法には、ほかに様々なものがある。

【参考書籍】

---here---

コメントを残す