だるまブログ

このブログもそうですが、3カラムをリキッドレイアウトにしたいということは良くあると思います。

一番多いパターンは

のような形ではないでしょうか。

main部分にnin,max widthを入れてもうまいこといきません。

早速検索して、参考にさせていただいたのは3カラムレイアウトで、中央を可変にするCSS(リキッドレイアウト)のページ。

サンプルもあって、丁寧に解説されています。今回はこれをもとに少し変更しました。

■基本的な考え方

3カラム リキッドデザイン 基本的考え方

基本的な考え方は上の図のようになります。

ここでポイントなのは、main_wrapperの中にmainがあり、main_wrapperに対して左右180px（side1、side2の幅）のマージンを持っていて、mainの左右にside1、2を持ってくることです。

これを実現するには、

[HTML}

[CSS]

#main_wrapper {
	float : left;
	width : 100%
}
 
#main {
	margin: 0 180px;
}
 
#side1 {
	float : left;
	margin-left: -100%;
	width: 180px;
}
 
#side2 {
	float : left;
	margin-left: -180px;
	width: 180px;
}

とします。

#main_wrapper、#side1、#side2がfloat leftしているので、この3つは横一列に並びますが、#side1はmargin-left -100%のネガティブマージンでmain_wrapperの左側にwidth 180pxでおさまります。
#side2はmargin-left -180pxのネガティブマージンでmain_wrapperの右側にwidth 180pxで収まります。
※この時、#side2のネガティブマージンと幅は同じ必要があります。

また、#mainはfloatしていませんから、#main_wrapperに対し左右180pxのマージンで配置され、結果的に、side1、main、side2が配置されることになります。

3カラムレイアウト

実際においては、#main_wrapper、#side1、#side2がfloat leftしているので、HTMLのside2の後ろでclearするか、全体をdivで囲ってclearfixする必要があります。

次に続く>>

No comments »