人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

<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で高さを指定しているみたいです)

よろしくお願いします。

●質問者: あらた
●カテゴリ:インターネット ウェブ制作
✍キーワード:background-color CSS firefox HTML IE6
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● ヨネちゃん
●20ポイント

うまくいっている例がよく分からなかったのですが、テーブルタグを使ってしまうのが手っ取り早いと思います。

<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タグは使いたくないというのがありまして。。。。説明が足りなかったですね。

ありがとうございます。


2 ● jiangmin
●30ポイント ベストアンサー

これでどうでしょう。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分かってないみたいだ。

ありがとうございます。


3 ● kakicg
●30ポイント
<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...です。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ