掲示板/スタイルシート質問板/過去ログ/一覧/ Firefoxで入れ子にならない

0 名前：信伍： 2007/03/17（土） 23:42 ［URL］ ID:ZdPARV4S sub-bK: CSS初心者です。URLのソースを簡略化すると

pageブロック(白)の中にmainブロック(黄色)があり、
その中にnaviブロック(緑)とrecentブロック(緑)とmain2ブロック(緑)がある

という仕組みです。
IEで見たらちゃんと表示されるのですが、
Firefoxで見たところ、mainブロックの中にmain2ブロックが入っていません。
Firefoxでもちゃんと表示させるにはどうすればいいのでしょうか。
ご指導お願いします。

1 名前： 某制作さん ： 2007/03/17（土） 23:42 ID:TEA0l5q. sub-t1: 恐れ入りますが

ソースを見てみないと
ナンともいえません…
すいません。。。

ただ、一つ言えるのは
Firefoxの方が
HTMLとCSSを正しく解釈し
記述どおりのレイアウトを
している事が多いです。

2 名前：信伍： 2007/03/17（土） 23:42 ［URL］ ID:ZdPARV4S sub-bK: ごめんなさい。↑のURLの部分に製作途中のページをUPしておいたのですが、
ソースをここにも載せておきます。
ページのソースをそのままコピペなのでかなり見づらいと思いますが、よろしくお願いします。
不慣れなので、何か問題があったらおっしゃってください。

-----HTML-----

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Team Semiacid 公式ウェブサイト</title>
</head>

<body>
<div id="page">

<div id="head">
<h1><img src="img/logo.gif"></h1>

<div id="about">
<p>Team Semiacidは、(主に)ストップモーションで変な動画を作る人たちです。</p>

</div>
</div>


<div id="main">
<div id="navi">
<ul>
<li>about</li>
<li>ギャラリー</li>

<li>メール</li>
</ul>
<div id="search">
</div>

</div>
<div id="recent">
<h2>最新の動画</h2>
</div>

<div id="main2">
<div id="choifuru">
<h2>チョイ古動画</h2>
<div class="section">
<img src="img/kari.gif" width="320" height="240">
<p>ひとつめ</p>
</div>
<hr>

<div class="section">
<img src="img/kari.gif" width="320" height="240">
<p>ふたつめ</p>
</div>
<hr>
<div class="section">
<img src="img/kari.gif" width="320" height="240">
<p>みっつめ</p>

</div>
</div>
<div id="etc">
その他
<div class="section">
更新履歴
</div>
<div class="section">
メール
</div>

<div class="section">
リンク
</div>
</div>
</div>
</div>

<div id="foot">
フッダ
</div>

</div>
</body>
</html>

-----CSS-----

/***全部に通じる系***/
*{
margin: 0px;
padding: 0px;
}

body{
margin: 0px;
background: #737373 url(img/bg.gif) fixed;
font-size: "Verdana", "ＭＳゴシック", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅";
font-size: 12px;
text-align: center;
}

#page{
width: 800px;
margin: 10px auto 0;
background: #FFFFFF;
text-align: left;
}

#head h1{
width:800px;
height: 100px;
}

#main{
background: yellow;
width: 800px;
text-align: center;
}

#navi{
height: 30px;
text-align: right;
background: green;
}

#foot{
width: 800px;
height: 50px;
background: #F5F5F5;
text-align: center;
clear: both;
}

/***トップ限定***/
#about{
background: #CCCCCC;
height: 40px;
}

#recent{
background: green;
width: 750px;
height: 350px;
margin: 25px;
clear: left;
}

#main2{
background: blue;
width: 750px;
margin: auto;
}

#choifuru{
background: green;
width: 400px;
text-align: center;
float: left;
}

#choifuru .section{
background: blue;
color: white;
width: 380px;
margin: 10px;
}

#etc{
background: green;
width: 335px;
margin-left: 15px;
float: left;
}

#etc .section{
color: white;
background: blue;
}

3 名前： 某制作さん ： 2007/03/17（土） 23:42 ID:TEA0l5q. sub-t1: 失礼しました。
URLを見落としてました。

さて解決策ですが
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
*html .clearfix {height:1%;}
.clearfix {display:block;}

とcssソース内に付け足し
main2のタグを
<div id="main2" class="clearfix">
とすると解決できると思います。

【理由】
floatを指定された要素は
cssの仕様上親要素のボックスとは高さが無関係になる為

ちなみに
余計なお世話になってしまいますが
<hr>より
cssでborderを使った方が
より◎だとおもいます。。。

以上です。
何かありましたらお申し付けください。

4 名前：信伍： 2007/03/17（土） 23:42 ［URL］ ID:ZdPARV4S sub-bK: ありがとうございます！やってみたところ、ちゃんと表示されるようになりました。

コレは…いわゆるハックってやつですね！助かりました。
clear:bothをmain2の外のフッタに指定してたのがいけなかった、って事ですかね？
ってことは、フッタの方に指定してたclear:bothはもう消しても問題ありませんよね？

それから<hr>の事ですが、
うっかりborderで指定してしまうとボックスの幅が広がってしまい、floar落ちとかしてしまうのが怖いので、
ちゃんと出来てから見栄えとかも考えながらborderを指定しようと思っています。
<hr>は見易いように暫定的につけているだけなので、途中で消す予定です。

丁寧なご指導、どうもありがとうございました。