段組テスト：3 ペイン版

「3つだと横に並びません。」

　ありみかさとみさんの 2 ペイン版デザインサンプルを見て、「3 ペインもきっと簡単」と思っていたら、なんかおかしい。色々調べ回った結果、どうも WinIE の以下のバグのせいで中央ペインの幅の計算値が激しくずれるらしいことが判明。

• CSSバグリスト＠CSSバグ辞典スレッド:ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう(WinIE)

　そもそも CSS2 では width 特性は「内容幅」を定義するものでして。で、「内容幅」とは要素の幅から margin、border、padding、の幅をさっぴいた残りということが規定されているのですが、WinIE では border や padding のサイズも width で指定したサイズに含むので、中央ペインが他のブラウザの表示より狭くなって、左に偏ってしまうのです。

デザインに border が使えない。

　このバグに関する逃げで、WinIE の幅のみ DHTML の要素であるところの expression で指定するというのがあるらしく、例えば width: 70%; width: expression('80%'); などとして WinIE のみ違う値を指定することもできるようです。

　が、ここでは正攻法で行くのがこの話の趣旨に合っていると思ったので、div { border:none; padding:0; } として padding と border の幅をつぶしてしまい、 width が指す幅の条件を各ブラウザで同じになるようにしました（乱暴）。背景に塗った色はハコを分かりやすくするためなのでセンスは問わないで下さい。デザインに border を使えなくなってしまうのがアレですが、padding に当たるものは子要素の margin を指定することで逃げられます。もしかすると、border も 1px 程度なら何とかなるかもしれません。

　なお、2ペインの場合になぜこの問題が表出しないかというと、2ペイン版では右ペインの左マージンをざっくりと広く取ることでそこら辺の解釈の違いを吸収できてしまうからなのでした。