※ ChatGPTを利用し、要約された質問です(原文:3列コラムのデザインがブラウザによって崩れてしまう)
3列コラムのデザインがブラウザによって崩れてしまう
このQ&Aのポイント
3列コラムのデザインがブラウザによって崩れてしまう原因を解説します
問題の原因として、IE8以下のバージョンのブラウザではデザインが崩れてしまうことがあります
コラムのデザインを正しく表示させるためのCSSの書き方について説明します
3列コラムのデザインがブラウザによって崩れてしまう
3列コラムのヘッダーフッター構成でページを作ったのですが
IE8では問題なく表示されるのですが…(Firefox3でも問題なく表示されます)IE8以下のバージョンのブラウザでは、デザインが崩れてしまうのです…
どこがおかしいのか分からず…CSSを書き出してみますので、アドバイスよろしくお願いいたします。
デザイン:
●Topページのみ3列コラムで、その他は2列コラムになっています
その為、センター部分を.centと.cent2で分け、横幅を変えて調整しました。。
●フッター部分はナビ部分とコピーライト部分と2つになっています。
.head
{
background-color: #ffffff;
width: 100%;
height: 113px;
}
.main (コラム全体)
{
width:100%;
background-color: #ffffff;
border: 0px;
}
.left (左コラム)
{
float:left;
width:170px;
background-color: #ffffff;
padding-right: 10px;
}
.cent (センターコラム topのみ)
{
float:left;
width:421px;
padding: 0px 10px 10px 15px;
}
.cent2 (右コラム 他ページ)
{
float:left;
width:591px;
padding: 0px 15px 10px;
}
.right (右コラム topのみ)
{
float:left;
width:175px;
}
.foot_menu (フッターナビ部分)
{
width:100%;
clear:both;
background-color: #FFFFFF;
}
.foot (フッターコピーライト部分)
{
clear:left;
height: 42px;
background-image: url(コピーライト用画像);
background-repeat: no-repeat;
}
その他補足が必要な場合はおっしゃって下さい。
よろしくお願いいたします
お礼
ご回答ありがとうございました。 何かしら原因がありそうですね。。 このサイトを参考に調べながら解決していきたいと思います。 ありがとうございました!