floatを使った時のブラウザでの違い

解決済

質問者：noname674
質問日時：2006/11/19 23:32
回答数：4件

ブログにてfloatを使い、下記のように表示させたいのですが、
IE7では思い通りに表示できるものの、Firefox2.0ではうまく表示できず困っています。
本来、

日付　　　　タイトル
カテゴリ
--------------------
日付　　　　タイトル
カテゴリ
--------------------

このようにしたいのですが、Firefoxで確認すると、

日付　　　　タイトル
カテゴリ

--------------------
日付　　　　タイトル
カテゴリ
--------------------
日付　　　　タイトル
カテゴリ
--------------------

と、最新エントリーのタイトル（class="right"）と、
区切り線（class="end"）の間だけがかなり空いてしまいます。
これはブラウザのバグなのでしょうか。それともスタイルシートの記述が
間違っているのでしょうか。よろしくお願いします。
なお、タグとcssは以下のように書いています。

【タグ】
<div class="left">
日付<br />
カテゴリー</div>
<div class="right">タイトル</div>
<div class="end"></div>

【css】
div.left {float: left;width: 100px;}
div.right { }
div.end {clear: both;
border-bottom: 1px dotted #000000;}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： Icefox
回答日時：2006/11/20 22:48

初めまして。

自分も良く分かってないかも知れませんが、質問の記事からそのままコピーして下のソースで表示させたらFirefox1.5、2.0、及びIE6とIE7では同じに表示されてますよ。2.0も間は空いてません・・・

コピーした記述なので、間違ってはないと思うのですが・・・

【ソース】

<html>
<head>

<style type="text/css">

div.left {float: left;width: 100px;}
div.right { }
div.end {clear: both;
border-bottom: 1px dotted #000000;}

</style>

<body>

<div class="left">
日付<br />
カテゴリー</div>
<div class="right">タイトル</div>
<div class="end"></div>

<div class="left">
日付<br />
カテゴリー</div>
<div class="right">タイトル</div>
<div class="end"></div>

<div class="left">
日付<br />
カテゴリー</div>
<div class="right">タイトル</div>
<div class="end"></div>

<div class="left">
日付<br />
カテゴリー</div>
<div class="right">タイトル</div>
<div class="end"></div>

</body>

</html>

- 0
- 件

通報する

この回答へのお礼

お忙しいところを確認してくださいましてありがとうございます。
長文を避けるため、文章を省いているうちに、教えていただくにあたり、肝心なところまで消してしまっていたことに気づきました。申し訳ありません。
ブログにてPHPのループを使っているのですが、htmlが間違っていないとすると、タグの記述に問題があったのかもしれないです。もう一度確認してみます。ご回答ありがとうございました。

通報する

お礼日時：2006/11/21 12:41

No.4

回答者： ba-demi
回答日時：2006/11/21 12:44

同じ様な表示になったことがあります。

（その時の場合は、今回の例でいうと「日付・カテゴリ・タイトル」の他に左側にメニューを配置していたのですが・・・・）
floatをたくさん組み合わせたレイアウトでの不具合でした。
IE以外のブラウザ（Firefox、Safari、OPERA）で、「１番上のものにだけ下に余白がたくさんできる状態」になりました。
その時は、（今回でいうところのdiv.rightに）widthを指定すれば直りました。
本当に参考ですが・・・

- 0
- 件

通報する

この回答へのお礼

2カラムで作成しているので、きっとba-demiさんと同じだと思います。この箇所だけでなく、全体的にレイアウトの不具合を起こしていたんですね。ありがとうございます。早速参考にさせていただきます。

通報する

お礼日時：2006/11/21 12:49

No.3

回答者： crepon133
回答日時：2006/11/21 09:59

borderを入れてみると

どのような構造になっているか分かりやすいと思います

div.left {float: left;width: 100px;border:1px solid #6666ff;}
div.right {border:1px solid #ff6666; }
div.end {clear: both;
border-bottom: 1px dotted #000000;}

- 0
- 件

通報する

この回答へのお礼

教えていただcssにて構造の確認をしてみましたが、特に問題はないようでした。この状態にしたままで、他の可能性も考えてみようと思います。ご回答ありがとうございました。

通報する

お礼日時：2006/11/21 12:44

No.1

回答者： crepon133
回答日時：2006/11/20 20:13

<!--

.item {
width:420px;
text-align:left;
border-bottom:1px dotted #000000;
margin-bottom:1.0em;
padding-bottom:2px;
}
.main {
width:300px;
float:right;
}
.side {
width:100px;
float:left;
}
.clear {
clear:both;
}
-->

<div class="item">
<div class="main">
タイトル
</div>
<div class="side">
日付<br>
カテゴリ
</div>
<br class="clear">
</div>

<div class="item">
<div class="main">
タイトル
</div>
<div class="side">
日付<br>
カテゴリ
</div>
<br class="clear">
</div>