CSSを使って幅100%で3カラムを表示 補足
以前に“CSSを使って幅100%で3カラムを表示”でやったサイトで、幅を狭くしていくと IEだけ maincolumn の内容がより、表示幅が狭くなると maincolumn 全体が下に落ちてしまうことに気がついた。
そこで、maincolumn に overflow:hidden を追加して解決だと思っていたのですが、Google chrome で今日たまたまみたら、margin-right が 右側の floaｔ：rightしたブロックの左側から計算されているようで、真ん中に大きな空白が出来てしまっていた。
いろいろ、やってみるがなかなかChrome Firefox IEの表示が同じにならない。そこで一番初期の状態
#centercolumn { margin-right:350px;}
だけにしてみると、Chrome Firefox はちゃんと意図した表示がされるが、IEのみやはり表示幅を狭くしていくと、下に落ちてしまう。 これでは、IEだけに対応するしかなさそうなので、
*:first-child+html #centercolumn { overflow:hidden; }
として、IE7のときだけ overflow:hidden が読み込まれるようにしてみた。
これでいいのだろうか？
padding と border のブロックに対しての幅や高さの計算方法も違うし
width 、margin の AUTO設定 も ブラウザによって反応が違うのかもしれません。
overflow:hidden を入れたときの、margin の扱いも違うみたいだし。
ブラウザ ５つも並べて表示させながらやっていれば、完璧かもしれませんが、進まなくなりそうです。