※ ChatGPTを利用し、要約された質問です（原文：カラム高さ揃え+固定フッター）
このQ&Aのポイント
カラム高さ揃えと固定フッターを実現するためのCSSについての質問です。
左側幅可変のリキッドレイアウトの中で、#boxBと#boxCのカラム高さが揃った上で、#footerをページ下部に固定したいです。
IE6では#boxBと#boxCの高さが揃わず、#wrapと#footerにすきまが空いてしまいます。
いつもお世話になります。
●確認ブラウザIE6、IE7、FF、 Mac Safari FF
左側幅可変のリキッドレイアウトの中で、
div#wrapの中にある「#boxB、#boxC」のカラム高さが揃った上で
#footerはページ下部に固定されている、添付図の状態にしたい。
●できてること：
IE7、FFにおけるカラム高さの統一、固定フッタ
●ここができない：
1.IE6にてboxBとCの高さが揃わない（Cが足らない）
2.#wrapと#footerにすきまが空く（boxBとCの背景色がfooterの上まで来てほしいのです）（全部のブラウザにて）
★CSS
/*リキッドレイアウト部分*/
* {
margin:0;
padding:0;
}
body {
text-align:center;
}
#container {
width:96%;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#boxA {
background:#ffc;
}
#boxB {
background:#fcc;
width:100%;
float:left;
margin-right:-200px;
}
#boxB p {
margin-right:200px;
}
#boxC {
background:#ccf;
width:200px;
float:left;
}
#boxD {
background:#cfc;
width:100%;
float:left;
}
/*100%固定フッタのためのCSS*/
*{
margin:0;
padding:0;
}
html,body{
height:100%;
background-color: #000000;
color: #000000;
}
html{
overflow-y:scroll;
}
#container {
width: 100%;
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
div#footer{
position:fixed;
bottom:0;
left:0;
text-align:center;
width:100%;
}
/* * * IE6 * * * */
* html,
* html body{
overflow-y:hidden;
}
* html div#maincontents{
height:100%;
overflow-y:scroll;
}
* html div#footer{
position:absolute;
}
/* カラム高さが違うものを揃える */
#wrap {
overflow:hidden;
}
#boxB,#boxC {
padding-bottom: 32768px;
margin-bottom: -32768px;
}
お礼
>abrilさん いつもありがとうございます♪ HTMLを質問に盛り込めなくて（字数制限で）すみませんでした。 カンペキです！ こうしたかったんです。 そうか、containerに背景色を指定して画像と併用するということに 思い至りませんでした！ containerにもmin-width、必要ですね。 それと質問なのですが、 Footerにクリアプロパティを指定しないで#wrapにクリアフィクスを 指定するのはどういう理由からなんでしょう…? お時間のある時にでも宜しくお願いしますm（_ _）m