<<前回

前回で3カラムのリキッドレイアウトはできましたが、このままだとmain部分が狭すぎたり間延びしたりするので、min-width、max-widthを設定することにします。

ここで問題なのは、min-width、max-widthがIE6で効かないこと。
いつもの手ですが、minmax.jsを使わせてもらいます。

こちらのサイトからminmax.jsをダウンロードしヘッダー部分に

<script src="minmax.js" type="text/javascript"><!--mce:0--></script>

のように読み込みます。

HTMLは下記のように全体を#contenntsで囲み、
[HTML]

<div id="contents">
<div id="header">
		headerの中身</div>
<div id="main_wrapper">
<div id="main">
			mainの中身</div>
</div>
<div id="side1">
		side1の中身</div>
<div id="side2">
		side2の中身</div>
<div id="footer">
		footerの中身</div>
</div>

CSSで、min-width、max-widthを設定します。
[CSS]

#contents {
	min-width: 760px;
	max-width: 960px;
}

これで、IE6でもきちんと表示されるものができました。
全体としては、以下のようなイメージです。

3カラムmax&min width

3カラムmax&min width