IE6(Quirks)で最小幅を実現

min-widthに対応していないIE6でも擬似的に最小幅を指定することができる。しかも、HTMLを可能な限り自然な形に保ち、JavaScriptもブラウザ振り分けを必要とするような「CSSハック」も使わない。そのかわり、これを実現するために必要な条件は多い。

このページは基本的にリキッドレイアウトであるが、最小幅400pxが指定されている。

このボックスは幅400px

可変幅でなおかつ最小幅を指定する条件

IE6がQuirks modeになる（XML宣言付のXHTMLなど）。
可変幅にしたいボックス（内側のボックスと呼ぶ）が別のボックス（外側のボックスと呼ぶ）に囲まれている。
外側のボックスには幅を指定しない。
内側のボックスには幅を指定する（ここが可変幅になるので、通常は%単位で指定する）。
外側のボックスに高さを指定する（height: 1%が使える）。
これらのどちらかのボックスの内側に固定幅のボックスを置く。

具体例

<div class="section1">
<h1>見出し1</h1>
  <div class="section2">
  <h2>見出し2</h2>
  <p>可変幅の文章</p>
  </div>
</div>

.section1 {
 height:1%;/* 高さが必要 */
 min-width:400px;
 /* 幅を指定すると駄目 */
}

.section2 {
 width:100%;/* 幅が必要 */
 /* min-widthはこっちでも可 */
}

h1 {
 width:400px;/* IE6用最小幅 h2でも可 */
}