3カラムレイアウト－左右・センターの幅を計算

2カラムの場合、外枠の幅から左右いずれかの幅を引けば、もう一方の幅が自動的に決まるわけですが、3カラムの場合、1つの枠を決めてもさらに2つの枠を作らなければなりません。

適当に枠を決めてしまった結果、本文記載スペースの幅が狭くなりすぎてしまったなどということにならないよう、事前に余白を含めたそれぞれの幅を決定しておきます。（仮に幅が思い通りにならなくても、CSSの指定をいじればすぐに修正することができますので、あまり厳密に考えなくても大丈夫ではあります。）

各枠のサイズの決め方

それでは、それぞれの枠サイズの決め方を説明します。ここでは外枠の幅を780pxに固定した場合を想定しています。

まずは余白の合計がいくつになるかを計算します。3カラムレイアウトの場合「左右、左とセンターの中間、センターと右の中間」と4つの余白を用意することになります。それぞれを10pxずつにすると、10×4で40pxとなります。

外枠780pxから余白分40pxを引いた740pxがそれぞれの枠に当てられる幅の合計最大値になります。

続いて左右のサイドバーの幅を決めます。ここは特にこれといった決まりはありませんので、センタースペースの幅が狭くなり過ぎない程度の幅にします。ここでは、一方を160px、もう一方を120pxにしておきます。

740pxから左右サイドバーの幅の合計280pxを引いた残りの460px。これがセンタースペースの幅になります。

[3カラムレイアウト各枠の幅の計算式]
余白幅×4 ＋ 左 ＋ センター ＋ 右 ＝ 外枠の幅
例：各余白を10pxずつ、左160px、センター460px、右120pxとする場合
10px×4 ＋ 160px ＋ 460px ＋ 120px ＝ 780px

以上のように、あらかじめ幅を計算して決めておくことで、その後の作業が楽になります。