前回で3カラムのリキッドレイアウトはできましたが、このままだとmain部分が狭すぎたり間延びしたりするので、min-width、max-widthを設定することにします。
ここで問題なのは、min-width、max-widthがIE6で効かないこと。
いつもの手ですが、minmax.jsを使わせてもらいます。
こちらのサイトからminmax.jsをダウンロードしヘッダー部分に
#script tag escaped#// #script tag escaped#
のように読み込みます。
HTMLは下記のように全体を#contenntsで囲み、
[HTML]
headerの中身
mainの中身
side1の中身
side2の中身
CSSで、min-width、max-widthを設定します。
[CSS]
#contents {
min-width: 760px;
max-width: 960px;
}
これで、IE6でもきちんと表示されるものができました。
全体としては、以下のようなイメージです。
3カラムmax&min width
