min-widthに対応していないIE6でも擬似的に最小幅を指定することができる。 しかも、HTMLを可能な限り自然な形に保ち、JavaScriptもブラウザ振り分けを必要とするような「CSSハック」も使わない。 そのかわり、これを実現するために必要な条件は多い。
このページは基本的にリキッドレイアウトであるが、最小幅400pxが指定されている。
このボックスは幅400px
<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でも可 */
}