CSSレイアウト サンプルソース

max-widthプロパティ（最大幅）/min-widthプロパティ（最小幅）で指定する、最大幅と最小幅を固定したCSSレイアウト解説です。

当サイト内で解説しているリキッドレイアウトは、コンテンツ部分がブラウザの拡大縮小に合わせ可変し続けるのに対し、max-widthプロパティ/min-widthプロパティで指定するレイアウトでは、最大幅と最小幅を固定してしまいます。

max-widthプロパティ（最大幅）/min-widthプロパティ（最小幅）はIE6以前のバージョンでは未対応です。よってIE6以前のブラウザ対策が必要です。（IE独自拡張スクリプト）

以下のサンプル解説では、最大幅を900px、最小幅を500pxとします。

サンプルソース

当サイト内の リキッドレイアウト2カラム左サイドバー を使用しています。

#wrapper {
  text-align: left;
  margin: 1em auto 0;
  width: 90%;
}

#wrapper {
  text-align: left;
  margin: 0 auto;
  min-width: 500px; /* 最小幅 */
  max-width: 900px; /* 最大幅 */
  position: relative;
  /* IE用 */
  width: expression(document.body.clientWidth < 501? "500px " : document.body.clientWidth > 901? "900px" : "auto");
}

2009/02追記：[互換モード表示の場合]

width: expression(document.body.clientWidth < 501? "500px " : document.body.clientWidth > 901? "900px" : "auto");

2009/02追記：[標準準拠モード表示の場合]

width: expression(document.documentElement.clientWidth < 501? "500px " : document.documentElement.clientWidth > 901? "900px" : "auto");

参考：IE6用max-width・min-width - Nefert

当サイトで配布のテンプレート枠では、IE用に別ファイルを読み込ませています。

<!--[if gte IE 6]>
<link rel="stylesheet" href="ie-base.css" type="text/css" media="screen,tv" />
<![endif]-->

まぁ何れにしても、max-width min-width を段組みとして使用する場合は、ホームページのコンセプトをよく考えなければいけないかな,,,,と思います。

2009年に入っても当サイトをご訪問いただいた方々の中には解像度800×600の方、javascriptを無効にしておられる方がまだまだいらっしゃいます。IEユーザーの統計もバージョン6.0が圧倒的に多いです。誰に見せたいホームページなのかをよく考慮しなければ、これらの方々は,,,,