ＣＳＳについて、ＯＳによる見え方の違いについて質問です。

質問

すみません、一つどうしても分からず質問です。
ＣＳＳを使いサイトのページを作っています。
背景画像の関係上、横に３つ（header・main・footer）に割って設定してるのですが、これのmainの部分、各divとも確実な高さは決まっていないので、高さは設定していないのですが、この方法でやると、ファイアーフォックスで背景画像が表示できません。
フィアーフォックスとIE7.0はほぼ同じように見えるので、恐らくIE7.0にも見えてないと思います。（IE6.0は見えます）

↓こんな感じです

<div id="main_haikei">　←width 100% ここに背景画像を設定しています
<div id="main">　　←width 920 px
<div id="hidari">　　　←左側コンテンツ
　<div id="hidari_1">…</div>
　<div id="hidari_2">…</div>
　</div>
<div id="mannnaka">　　←真中コンテンツ
　<div id="mannnaka_1">…</div>
　<div id="mannnaka_2">…</div>
　</div>
<div id="migi>　　　　　←右側コンテンツ
　<div id="migi_1">…</div>
　<div id="migi_2">…</div>
　</div>
</div>
</div>

これはどうして表示できないのでしょうか？
上手い設定の仕方など教えて頂ければ助かります…。

ちなみにhidari.mannnaka.migiはboth設定がしてあります。

回答No.3

abril

高さは通常成り行きになるのが自然ですので特に指定は要りませんし、指定しなければ初期値はautoですからその点は問題ないです。
肝心のCSSが提示されていないので推測ですが、おそらくANo.2の回答者の方が指摘されている通り、コラムの構造・ネーミングからして<div id="hidari"><div id="mannnaka"><div id="migi">あたりにfloatを使用されていて、それが適切な定義になっていないのだと思われます。

これもANo.2様と同じですが、floatに関する挙動はIE6の方が解釈がおかしいのでIE6を基準にされない方がよろしいです。
floatを使用したコラム組に関しては下記のサイトがよくまとめられていて参考になると思いますよ。

【CSSによる段組（マルチカラム）レイアウト講座】
http://www.geocities.jp/multi_column/

ひとつだけ気になったのが：

> ちなみにhidari.mannnaka.migiはboth設定がしてあります。

何せCSSの定義が不明なので推測の域を出ないのですが、もしかして"clear: both;"とfloatを同時に同じボックスのスタイルに設定してたりしますか？

お礼

親切なアドバイスをありがとうございます。早速参考にしたいと思います。
そして気になされていた部分ですが、その通りです。
float設定だけでは上手くいかなかったりしたので…。

回答No.2

0wl

ｃｓｓの質問なのにどうしてｃｓｓが出てこないか謎ですね
mainとmain_haikeiの２重ネーミングも謎です。

多分、floatさせて何かしているのでようが、floatとは浮くことなので高さを持たないのが正しい解釈です。そのあたり、理解されていますか？IEの挙動がｃｓｓ的にはおかしいので、Operaも同じでしょうね。

ヒントでした。

ワンモアヒント。
お奨めしませんが、「clearfix」という手法の解説を丁寧にされているサイトをご覧になると、どうして背景が表示されないのかわかると思います。それでわからなければ、ｃｓｓをつまみ食い勉強でなく、体系だって勉強されることをお奨めします。

お礼

御礼を言う場所を間違えました、すみません。
ありがとうございました。

補足

仰るとおり初心者です。アドバイスありがとうございました。
勉強していきたいと思います。

回答No.1

torisabure

普通に高さは設定してください。
微調整はあとでもできるのですから
高さが無い以上表示されないです。
どうしてもいれたくないならautoでもいれてください。

お礼

アドバイスありがとうございます。分かりました。