ここではfloatで作る3段組(可変)を解説します。
3段組(固定)の仕組みを理解したら、すぐに理解できるものです。
ここでは、3段組(固定)で作ったベースを利用して、3段組(可変)を作ってみます。
floatで作る3段組(可変)作成の流れ
まず3段組(固定)のソースを用意します。#wrapper、#container、#primaryの幅を100%にします。
#advertisementを重ねて配置する分、#primaryの左方向には#secondaryを重ねて配置する分に必要なマージンを指定します。また#contentには左右方向にそれぞれ#secondaryと#advertisementの幅分のマージンを指定します。
CSS部分
#wrapper { width: 100%; } #container { float: left; width: 100%; margin-right: -200px; background-color: #FAFECB; } #primary { float: right; width: 100%; margin-left: -260px; background-color: #F7FFF0; } #secondary { float: left; width: 260px; background-color: #EEFEFF; } #content { margin: 0 200px 0 260px; } #advertisement { float: right; width: 200px; background-color: #F8E8FF; }
この様に3段組(可変)を作ることができました。ここでは#containerと#primaryに指定した負のマージンが重要な役割を担っています。幅を100%とした#containerの、右方向に指定した負のマージンは、#advertisementを重ねて配置させるための指定です。
また同様に、幅を100%とした#primaryの左方向には、#secondaryが重ねて配置されるよう、負のマージンを指定しています。ただし、これだけでは#primaryの内容が、#secondaryや#advertisementのボックスと重なって表示されてしまいます。これを防ぐために、#contentというボックスを#primaryの中に設け、左右方向に正のマージンを指定しています。
floatで作る3段組(可変)のサンプルはこちら
上記の記述とは多少異なる部分はあります。詳しくはソースを確認してください。