※ ChatGPTを利用し、要約された質問です（原文：CSSレイアウト(2列型)に関して）
CSSレイアウト(2列型)に関する質問
このQ&Aのポイント
CSSレイアウト(2列型)に関してご質問します。メインとサイドバーで構成される2列のレイアウトについて、FirefoxとIEで表示が異なる問題が発生しています。
IE6ではメインの高さがサイドバーの高さより高い場合、サイドバーの下部は#contentで指定した白になります。しかしFirefoxではサイドバーの下の部分がbody要素に指定したyellowになってしまいます。
メインやサイドバーの高さを指定せずに可変にするため、固定値を設定したくない場合、FirefoxでIEのように#contentの背景色を反映させる方法をご教示ください。
お世話になります。2列の左列がメインで右列がサイドバーというCSSレイアウトに関してご質問します。
以下のような構造のCSSレイアウトを作成しました。
body
|
|-- #wrapper
| |
| |-- #content
| | |
| | |-- #main
| | |
| | |-- #sidebar
body {
background: yellow; }
#wrapper {
width:700px;
background: white; }
#content {
width: 700px;
background: white; }
#main {
float: left;
width: 500px;
background: white; }
#sidebar {
float: right;
width: 200px;
background: blue; }
※padding: 0;margin: 0;を実際には全てに追加してあります。
----- 以下HTMLファイル -----
<body>
<div id="wrapper">
<div id="content">
<div id="main">
<p>
・・・・・・
</p>
</div>
<div id="sidebar">
<p>
・・・・・・・
</p>
</div>
</div>
</div>
</body>
上記においてIE6ではメイン(#main)の高さがサイドバー(#sidebar)の高さより高い場合、サイドバーの下部は#contentで指定した白になります。しかしFirefoxではサイドバーの下の部分がbody要素に指定したyellowになってしまいます。※Firefox1.07で試しています。
メイン(#main)やサイドバー(#sidebar)の高さを指定していないためと考えますが、メイン及びサイドバー共に高さを可変にするため固定値を設定したくない場合は、FirefoxでIEのように#contentの背景色(白)を反映するにはどうすればよいのでしょうか。
質問が長くなりましたが、手がかりでもつかめればと思っています。どうぞ宜しくお願いします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
早速のご回答ありがとうございます。 ご指摘の方法を試したところまくいきました。 長いことこの問題で悩んでいたので大変助かりました。 ありがとうございました。