HTMLは
<div id="main">
<div id="left">
<br /><br /><br /><br /><br />
</div>
<div id="right">
<br /><br /><br /><br /><br />
</div>
</div>
CSSは
#main {
width:760px;
background-color:#336666;
}
#right {
float:right;
width:500px;
}
#left {
float:left;
width:200px;
}
という形です。
このdiv id="main"のbackground-color:#336666を全体に敷き詰めたいのですが、うまく表示されません。
①この部分はコンテンツ量がページごとに違いますので、heightで高さを指定するのは、なしです。
②floatのwidthをid="main"に対し、いっぱいいっぱいの幅で指定しても、モダンブラウザ以外の表示が崩れる可能性があるので、なしです。
③CSSのバグからか、IE6ではうまくいくのですが、Firefoxなどはうまく表示されません。
④２と関連して、floatで流しているid="right"とid="left"にbackground-color:#336666;を指定しても、真ん中に空白ができてしまうので、なしです。
うまくいっているサイトは、http://www.freshbranding.co.uk/のメインコンテンツのエリアです。（写真が入っているエリアは、heightで高さを指定しているみたいです）
よろしくお願いします。
No.2
125
8
30pt
これでどうでしょう。mainの末尾に"clear: both"するだけの空のDIV要素を置いてみました。
<div id="main"> <div id="left"> <br /><br /><br /><br /><br /> </div> <div id="right"> <br /><br /><br /><br /><br /> </div> <div style="clear: both"></div> </div>
No.1
81394
20pt
うまくいっている例がよく分からなかったのですが、テーブルタグを使ってしまうのが手っ取り早いと思います。
<table id="main"><tr><td> <div id="left"> <br /><br /><br /><br /><br /> </div> <div id="right"> <br /><br /><br /><br /><br /> </div> </td></tr></table>
いやー、今回は完全なXHTML+CSSのWeb標準的なサイト作りなもので、どうしてもtableタグは使いたくないというのがありまして。。。。説明が足りなかったですね。
ありがとうございます。
No.2
1258
ここでベストアンサー
30pt
これでどうでしょう。mainの末尾に"clear: both"するだけの空のDIV要素を置いてみました。
<div id="main"> <div id="left"> <br /><br /><br /><br /><br /> </div> <div id="right"> <br /><br /><br /><br /><br /> </div> <div style="clear: both"></div> </div>
できました！ありがとうございます。clearすればよかったのか。。。
このid="main"の次にdiv id="footer"にclear="both"していたんですけど、関係なかったみたいですね。やっぱ、まだCSS分かってないみたいだ。
ありがとうございます。
No.3
443
30pt
<div id="right"> <br /><br /><br /><br /><br /> </div>
の後にfloatをクリアーするタグが必要になります。
例えば↓
<div id="main"> <div id="left"> <br /><br /><br /><br /><br /> </div> <div id="right"> <br /><br /><br /><br /><br /> </div> <div style="clear:both;" /> </div>
ありがとうございます。
結局、このへんの空タグを使うやり方以外にそういやなんかあったなと思い出し、次のようなコードにしました。
#main:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#main {
display:inline-table;
}
/* Hides from IE-mac \*/
* html #main {height:1%;}
#main {display:block;}
/* End hide from IE-mac */
これで、空タグ入れずに、モダンブラウザではうまく表示されています。参考のアドレスは、http://www.kuroduction.com/doc/translation/position_is_every...です。
皆さん、ありがとうございました。
41
41
3
4
2
できました！ありがとうございます。clearすればよかったのか。。。
このid="main"の次にdiv id="footer"にclear="both"していたんですけど、関係なかったみたいですね。やっぱ、まだCSS分かってないみたいだ。
ありがとうございます。