※ ChatGPTを利用し、要約された質問です(原文:3カラム IE 右落ち)
IEで3カラムレイアウトを作成中に右ボックスが下に落ちる問題の解決方法
このQ&Aのポイント
質問者はマック環境でのブラウザでは3カラムレイアウトが正しく表示されるが、WindowsのIE 7,6,5では右ボックスが下に落ちてしまうという問題に直面している。
問題の原因を特定するために、CSSのコードを確認したが原因は特定できず、またmarginやpaddingの設定を変更しても問題が解決しなかった。
質問者は右ボックスの幅に余裕を持たせてborderを使って位置を確認したが、右にはスペースがあるにもかかわらずボックスが上に移動しないという状況で困っている。
現在幅固定3カラムでサイトを作っているのですが、私のマック環境(safari&Firefox)ではちゃんとレイアウトが整うのにwindowsのIE 7,6,5ではどれも右のボックスが左下に落ちてしまいます。
CSSはもともと
#container {
margin:0px auto;
width:1000px;
text-align:left;
}
.wrapper {
width:800px;
float:left;
}
/* 左 */
.left {
float: right;
width:200px;
}
/* 中央 */
.main {
float: right;
width:600px;
}
/* 右 */
.right {
float: left;
width:200px;
}
/* フッター */
.footer {
width:100%;
clear:left;
}
で、これに左右にmargin-left:15px;などを入れていたので、それが原因かと思いdisplay: inline;を足してみたり外してみたのですが変わらず、
左右のボックスの中に<div></div>で囲ったフレーム素材の中にカテゴリーなどをいれているので、そこにmarginやpaddingが発生しているので今度は上記のwidthをちょっと変えてみました。
現在wrapperは780px 左190px 中央580px、右181pxとしてかなり右に余裕を持たせて、尚かつ右で使用していたフレーム素材を全て取り外し1行文字のみだけで試してみたのですが、全然右に上がってきてくれません。
またwidthに余裕を持たせてborderを使ってそれぞれの位置を確認したのですが、右にはかなりのスペースがあいているのに、右に上がってきてくれないのです。
一体何がいけないのでしょうか??
どうかお力をお貸しください。宜しくお願い致します。
お礼
早速のアドバイス有り難うございました。 やっと光がみえたか…っと思いきや、残念ながら高さを指定しても、片っ端からバグの回避タグを入れてもウンともスンともいってくれないので、もう一度作り直す事にしました。これも修行のうちとして頑張ります。 本当に有り難うございました。