floatで作る3段組(可変)

ここではfloatで作る3段組(可変)を解説します。
3段組(固定)の仕組みを理解したら、すぐに理解できるものです。
ここでは、3段組(固定)で作ったベースを利用して、3段組(可変)を作ってみます。

floatで作る3段組(可変)作成の流れ

まず3段組(固定)のソースを用意します。#wrapper、#container、#primaryの幅を100%にします。
#advertisementを重ねて配置する分、#primaryの左方向には#secondaryを重ねて配置する分に必要なマージンを指定します。また#contentには左右方向にそれぞれ#secondaryと#advertisementの幅分のマージンを指定します。

CSS部分

[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;
}
[/css]

この様に3段組(可変)を作ることができました。ここでは#containerと#primaryに指定した負のマージンが重要な役割を担っています。幅を100%とした#containerの、右方向に指定した負のマージンは、#advertisementを重ねて配置させるための指定です。

また同様に、幅を100%とした#primaryの左方向には、#secondaryが重ねて配置されるよう、負のマージンを指定しています。ただし、これだけでは#primaryの内容が、#secondaryや#advertisementのボックスと重なって表示されてしまいます。これを防ぐために、#contentというボックスを#primaryの中に設け、左右方向に正のマージンを指定しています。

floatで作る3段組(可変)のサンプルはこちら
上記の記述とは多少異なる部分はあります。詳しくはソースを確認してください。