双報のいろいろ

双報のいろいろ

事務用品の販売 WWWサイト制作の余談など

WWW

CSSを使って幅100%で3カラムを表示 補足

以前に“CSSを使って幅100%で3カラムを表示”でやったサイトで、幅を狭くしていくと IEだけ maincolumn の内容がより、表示幅が狭くなると maincolumn 全体が下に落ちてしまうことに気がついた。

そこで、maincolumn に overflow:hidden を追加して解決だと思っていたのですが、Google chrome で今日たまたまみたら、margin-right が 右側の float: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 の扱いも違うみたいだし。
ブラウザ 5つも並べて表示させながらやっていれば、完璧かもしれませんが、進まなくなりそうです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください