※ ChatGPTを利用し、要約された質問です（原文：CSSレイアウト・背景グラデーション）
CSSレイアウト・背景グラデーション
このQ&Aのポイント
CSSレイアウト・背景グラデーションに関する質問の要約文です。レイアウトの中でテキストボリュームの差による表示の崩れや背景画像の影の問題を解決する方法についての問い合わせです。
CSSレイアウト・背景グラデーションの問題解決についての要約文です。特に枠線や背景画像による影の表示に関して、FireFoxやSafariといったブラウザの差異があることについての疑問があります。
CSSレイアウト・背景グラデーションについての要約文です。テキストボリュームの差による表示の崩れや背景画像による影の表示に問題がある場合の解決策を求めています。
初めまして
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。
ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。
bodyと#wrapperを使いセンター表示にしてますがページによって
テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。
autoでも非設定でも複数ブラウザで大丈夫だったので省きました。
このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。
FireFoxとSafariだけヘッダー部分にしか影が出ません。
IEやSleipnirではフッターまで反映されます。
ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。
heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。
解決策や当方の設定に問題点があるでしょうか？
影画像は820pxで制作#wapperの背景に指定してます。
よろしくお願いします。
body {
text-align: center;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#wrapper {
text-align: left;
width: 800px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
padding: 0px;
}
#header {
margin: 0px;
padding: 0px;
width: 800px;
height: 300px;
}
#contents {
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-left: 0px;
width: 800px;
height: auto;
margin-bottom: 0px;
}
#contents #left {
margin: 0px;
padding: 0px;
width: 200px;
float: left;
height: auto;
}
#contents #right {
padding: 0px;
float: right;
width: 600px;
margin: 0px;
height: 1280px;
}
#footer {
margin: 0px;
padding: 0px;
width: 800px;
height: 60px;
}
上では#wrapperに画像設定してませんが#wrapperに背景設定してます。
どのブラウザでもレイアウト崩れは起きてないです。
よろしくお願いします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
素早いお返事ありがとうございます。 早速調べて記述してみました。 結果#wapperにclearfixを使ったら見事に解決しました。 同じような事で悩んでる方clearfixで調べると良いと思います。 解決致しましたので早々ですが回答を締め切らせていただきます。 回答者の方には私の初めての質問に回答して頂き感謝します。 ありがとうございました。