3カラムのリキッドレイアウト Part2
Posted by maru on 24 11月 2009 at 11:51 pm | Tagged as: コーディング
前回で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