てんぽ : メモ：Netscape7.1, IE6 clearできないバグ

ネガティブマージンを使ったCSSで三段組の場合、Netscape7.1でclearが正しく機能しない。 親要素のマージン幅によってはclearが効かないに似た症状。

これは三段組に限らず、大きな負の左右マージンとフロートをつかった段組法の場合に発症するらしい。 段組レイアウトでネガティブマージンとフロートを使うのは、 「サイドバー固定幅かつメインカラム可変幅で2段（3段）ぶち抜きフッター付きレイアウト」を実現するため（ADP: デザインテンプレート1110とネガティブマージン参照）ですが、 ここでmargin-left(right): -100%などとやってしまうとフッターのclearが効かなくなる（Netscape7.1とIE6で確認。Firefox1.5とOpera8.54は大丈夫）。

たとえば2段組レイアウトを次のようにしている場合。

<div id="main">
<p>可変幅</p>
</div>

<div id="sub">
<p>固定幅</p>
</div>

<div id="footer">
<p>ここでclear</p>
</div>

#main {
 width:100%;
 float:right;
 margin-left:-100%;
}

#sub {
 width:200px;
 float:left;
}

#main p {
 margin-left:220px;
}

#footer {
 clear:both;
}

（ちなみに2段組ならmargin-left: -100%ではなく、margin-left: -200pxで充分。）

• 正しくclearできない場合のサンプル

多分、margin-left:-100%;により#mainの左マージン辺が右マージン辺と一致してしまうため、 左右マージン間の距離が0になっていることが原因だと思われる（margin-left: -99%なら正しくclearできる）。

したがって、#mainの左マージンを-100%から-99%に変更し、#subのほうに-1%の左マージンを与えればよい。

別の対処法としては#mainにpadding-right(left): 1pxを指定する。これはNetscape7.1とIE6（標準モード）に有効。 また、IE6（標準/互換モード）はこれらブロックの親要素（たとえばbody）に#mainのフロートと同じ側のpaddingを指定することで回避できる（この場合ならpadding-right: 1px）。