DIVで作った一覧の一段目と2段目が重なってしまう

[新着] Webテンプレートを仮オープンしました

0   名前： あき ： 2006/12/06（水） 18:30  ID:aKaeeuWy
よろしくお願いします。
4カラムで一番上にヘッダ、真ん中の段は左にサイドメニュー、右にメイン、下の段にフッターという形です。
メインには画像の下に文章をつけた形で横4つ、縦5つの一覧表を作っています。
画像の大きさや文章の長さもまちまちで、一つ一つのボックスの高さを決める事ができません。

問題点：
・IEでは高さの高いものに合わせて一つ一つが伸びてくれるし、段毎に見た時も同じ高さにそろっているが
　FireFoxでは内容が250より高くなっていてもCSSで決めた通りの250の高さで一段ごとが固定されていて、
　2段目が1段目に被っている。
・IEでは問題ないが、FireFoxで見るとメインの内容とフッターが重なってしまっている。

希望：
・FireFoxでも内容の多さに合わせて一つ一つのボックスは伸びたり縮んだりして欲しいのですが、
横一列で考えた時、高さは全部同じになっていて欲しい。
・FireFoxでもメインの一覧がフッタ被らないで欲しい。


以下、HTMLとCSSです。

**********HTML***************
<div id="container">
<div id="header">ヘッダーはここに</div>

<div id="sidemenu">サイドメニューはここに</div>

<div id="main">
<!--1段--><div class="grid_group">
<div class="grid">
<IMG ・・・>
<p>ほにゃらら</p>
</div>
<div class="grid">
<IMG ・・・>
<p>ほにゃらら</p>
</div>
<div class="grid">
<IMG ・・・>
<p>ほにゃらら</p>
</div>
<div class="grid">
<IMG ・・・>
<p>ほにゃらら</p>
</div>
</div><!--/1段-->

<!--2段--><div class="grid_group">
<div class="grid">
<IMG ・・・>
<p>ほにゃらら</p>
</div>
<div class="grid">
<IMG ・・・>
<p>ほにゃらら</p>
</div>
<div class="grid">
<IMG ・・・>
<p>ほにゃらら</p>
</div>
<div class="grid">
<IMG ・・・>
<p>ほにゃらら</p>
</div>
</div><!--/2段-->

<!--同じように3段、4段、5段入れる-->

</div>

<div id="footer">
フッターはここに
</div>

</div>


**********CSS****************
*{
padding:0;
margin:0;
}

#container{
width:800px;
}

#header{
widht:100%;
}

#sidemenu{
float:left;
width:210;
margin:5 10 0 5;
}

#main{
float:left;
width:560;
margin:5 5 0 0;
}

#footer{
clear:left;
width:100%;
margin:10 0 0 0;
}
.grid_group{
width : 100%;
height:250px;
}

.grid{
float : left;
width : 23%;
height:100%;
margin:2 2 0 0;
}
1   名前： くいん ： 2006/12/06（水） 18:30  ID:rbRHv8MX
一覧「表」なのですからわざわざボックスのDIVに無理やりするのではなくTABLEを使うのをオススメします。
TABLEでレイアウトをするならDIVにしようよ！というのは…そこかしこで聞く気が致しますが、
今回の場合レイアウトを表で作ってるのではなくて、表のレイアウトを考えているのですし。
個人的にTABLEは全廃したいんだ！というのでしたら…聞き流してやってくださいませ。

※色々やり方を考えるにあたって、背景色や数値の単位など手をいれてあります。
　状況に合わせて削って清書してください。

※数字が「０」の場合は単位がなくても効果がでますが、それ以外の時は単位(px,%等)を指定してください。



*{
padding:0;
margin:0;
}

#container{
width:800px;
}

#header{
widht:100%;
background-color:#ccc;
}

#sidemenu{
float:left;
width:210px;
margin:5px 10px 0 5px;
background-color:#333;
}

#main{
float:left;
width:560px;
margin:5px 5px 0 0;
background-color:#555;
}

#footer{
clear:both;
width:100%;
margin:10px 0 0 0;
background-color:#888;
}

td {text-align: center; 
    vertical-align: top;
    width:140px;}


<div id="container">
<div id="header">ヘッダーはここに</div>

<div id="sidemenu">サイドメニューはここに</div>

<div id="main">

<table>
<tr>
<td><div style="width:100px; height:300px; background-color:#bab;">表示テスト用のボックスです。本来はimgになります。</div>ほにゃらら１</td>
<td><div style="width:100px; height:100px; background-color:#bab;"></div>ほにゃらら２</td>
<td><div style="width:100px; height:250px; background-color:#bab;"></div>ほにゃらら３</td>
<td><div style="width:100px; height:120px; background-color:#bab;"></div>ほにゃらら４</td>
</tr>
<tr>
<td><div style="width:100px; height:300px; background-color:#bab;"></div>ほにゃらら１</td>
<td><div style="width:100px; height:100px; background-color:#bab;"></div>ほにゃらら２</td>
<td><div style="width:100px; height:250px; background-color:#bab;"></div>ほにゃらら３</td>
<td><div style="width:100px; height:120px; background-color:#bab;"></div>ほにゃらら４</td>
</tr>
</table>
</div>

<div id="footer">
フッターはここに
</div>

</div>
2   名前： hiromichi ： 2006/12/06（水） 18:30  ［URL］  ID:xP9QGXTM
height属性で高さを２５０と固定しているため正常なブラウザでは表示がおかしくなってしまうと思います。
・一段ごとにgrid_groupでブロック要素を作っていることを前提。
・grid_groupごとにfloatをleftし、grid_groupのdiv終了タグ後ごとにclearでbothする。
・回り込みの解除はテストとしてbr要素をもうけて、style属性を与えています。(divの閉じにもうけてもよいかと思われます。)


<html>
<head>
<style type="text/css">
<!--
* { margin: 0; padding: 0; border: none; }
body	{ text-align: center; }
#wrapper	{ margin: 0 auto; text-align: left; width: 800px; }
#header		{ position: relative; }
#primary	{ width: 560px;  float: right; }
#secondary	{ width: 210px; float: left; }
ul	{ list-style-type: none; }
li	{ float: left; width: 110px; }
img	{ width: 110px; }

-->
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<h1>ヘッダー部分</h1>
</div>
<div id="primary"><!-- メイン部分 -->
<div class="grid_group">
<ul>
<li><img /><p>testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。</p></li>
<li><img /><p>testだ。testだ。testだ。testだ。testだ。testだ。</p></li>
<li><img /><p>testだ。testだ。testだ。testだ。testだ。testだ。</p></li>
<li><img /><p>testだ。testだ。testだ。testだ。testだ。testだ。</p></li>
<li><img /><p>testだ。testだ。testだ。testだ。testだ。testだ。</p></li>
</ul>
</div>
<br style="clear: both" />
<div class="grid_group">
<ul>
<li><img /><p>testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。testだ。</p></li>
<li><img /><p>testだ。testだ。testだ。testだ。testだ。testだ。</p></li>
<li><img /><p>testだ。testだ。testだ。testだ。testだ。testだ。</p></li>
<li><img /><p>testだ。testだ。testだ。testだ。testだ。testだ。</p></li>
<li><img /><p>testだ。testだ。testだ。testだ。testだ。testだ。</p></li>
</ul>
</div>
<br style="clear: both" />
</div>

<div id="secondary"><!-- サイドバー -->
<p>サイドバーテストです。サイドバーテストです。サイドバーテストです。サイドバーテストです。サイドバーテストです。サイドバーテストです。サイドバーテストです。サイドバーテストです。サイドバーテストです。サイドバーテストです。サイドバーテストです。サイドバーテストです。サイドバーテストです。サイドバーテストです。サイドバーテストです。</p>
</div>
<br style="clear: both" />
<div id="footer">
<p>フッター部分テスト。</p>
</div>
</div>
</body>
</html>


メイン、サイドメニュー、フッターの配置方法にはいろいろなやりかたがあると思いますのであくまで参考程度にお願いします。どうぞ検証してみてください。
3   名前： あき ： 2006/12/06（水） 18:30  ID:aKaeeuWy
くいんさん、hiromichiさん、回答ありがとうございました。
TABLE全廃派という訳ではないんですが、今回テーブルを使わずに…ということにチャレンジしてみました。
お二人から教えて頂いた内容を参考に作り直してみます。
本当にありがとうございました。
一覧へ戻る