<div>のfloatで分けているエリア内に同じ背景画像を指定したいのですが、どうすればいいのでしょうか。


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などはうまく表示されません。

④2と関連して、floatで流しているid="right"とid="left"にbackground-color:#336666;を指定しても、真ん中に空白ができてしまうので、なしです。

うまくいっているサイトは、http://www.freshbranding.co.uk/のメインコンテンツのエリアです。(写真が入っているエリアは、heightで高さを指定しているみたいです)

よろしくお願いします。

回答の条件
  • 1人2回まで
  • 登録:2006/07/05 17:30:46
  • 終了:2006/07/06 10:06:43

ベストアンサー

id:jiangmin-alt No.2

jiangmin回答回数125ベストアンサー獲得回数82006/07/05 18:17:20

ポイント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>
id:aratako0

できました!ありがとうございます。clearすればよかったのか。。。

このid="main"の次にdiv id="footer"にclear="both"していたんですけど、関係なかったみたいですね。やっぱ、まだCSS分かってないみたいだ。

ありがとうございます。

2006/07/06 10:02:06

その他の回答(2件)

id:yoneto164 No.1

ヨネちゃん回答回数813ベストアンサー獲得回数942006/07/05 17:58:21

ポイント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>
id:aratako0

いやー、今回は完全なXHTML+CSSのWeb標準的なサイト作りなもので、どうしてもtableタグは使いたくないというのがありまして。。。。説明が足りなかったですね。

ありがとうございます。

2006/07/06 10:00:39
id:jiangmin-alt No.2

jiangmin回答回数125ベストアンサー獲得回数82006/07/05 18:17:20ここでベストアンサー

ポイント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>
id:aratako0

できました!ありがとうございます。clearすればよかったのか。。。

このid="main"の次にdiv id="footer"にclear="both"していたんですけど、関係なかったみたいですね。やっぱ、まだCSS分かってないみたいだ。

ありがとうございます。

2006/07/06 10:02:06
id:kakicg No.3

kakicg回答回数44ベストアンサー獲得回数32006/07/06 07:52:07

ポイント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>
id:aratako0

ありがとうございます。

結局、このへんの空タグを使うやり方以外にそういやなんかあったなと思い出し、次のようなコードにしました。

#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...です。

皆さん、ありがとうございました。

2006/07/06 10:05:06

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません