CSSによる段組とブラウザのバグ対策

デフォルトでの段組の並び方はつぎのようになっています。
ページの巾はデフォルトの940pxから840pxに縮めました。

よくあるデザインの右と左にカラムをもってくると、位置の調整が必要となります。

CSSの変更はつぎのようになりました。

/* Thin-Wide-Thin */
.layout-twt #alpha {
    left: 190px;　/*左から右へ190pxの位置に表示*/
    width: 460px;
}

.layout-twt #beta {
    left: -460px;　/*左から460pxの位置から－460pxの位置、つまり0の位置に表示*/
    width: 190px;
}

.layout-twt #gamma {
    width: 190px;
}

IE6対策を書きとめておきたいと思います。

• フロートしたボックスの直後の（clear も float もしていない）ボックスには幅を指定してはいけない
• float を指定したボックスには必ず width も指定する
• いわゆる「カラム落ち」にならないように対策を取る
• width を指定した要素には左右の padding と border は指定しない
• paddingが必要な場合はその子要素に padding か margin を設定する

• clear を指定した要素には上マージンは指定しない