cssでボックスを横並びにし、横幅指定してもくっついてしまう。

質問

こんにちわ！
只今CSS課題に取り組んでいるのですが、
フロートを使用し、写真（A）、テキスト（B）、写真（C）、テキスト（D）、と並べたいのですが、（B）に横幅指定しているにもかかわらず、（C）がＩＥではＯＫなのですが、FIREFOXではぴたっとくっついてしまいます。

【html】
<div class="box">
<div class="photo"><img src="img/photo_01.jpg" width="132" height="85"></div>
<div class="txt">第23回こまったな<br>どうしたのかな賞<br>受賞</div></div>
<div class="box">
<div class="photo"><img src="img/photo_02.jpg" width="132" height="85"></div>
<div class="txt">第23回どなたかー<br>助けてください賞<br>受賞</div></div>
</div>

.box{
width : 258 px;
margin: 0px;
float:left;
}
.photo{
width : 132 px;
margin: 0px;
float:left;
}
.txt{
width : 123 px;
color: #555555;
font-size: 12px;
text-align: left;
margin: 0px 0px 0px 3px;
padding: 0px ;
line-height:18px;
float:left;
}

となっております。
何故、ＩＥでは大丈夫でFirefoxでは内容によって横幅が変わってしまうのでしょうか？
ご教授願いませんでしょうか～？
宜しくお願い致します。

回答No.1

noname#121246 · ベストアンサー

まず、</div>が余計に1つ多いので、削除してみてください。
あと、floatする方向にマージンをかけるとＩＥ6ではバグがでるので、
.txt{
margin: 0px 0px 0px 3px;
}
を
.txt{
margin:0px;
padding:0px 0px 0px 3px;
}
に変えてみてください。
.photoと.boxにもpadding:0pxを設定して、
divにも
div{
padding:0px;
margin:0px;
}
を設定して、もう一度ffで確認してみてください。

お礼

今回は、ありがとうございました！
無事、正常に表示させる事が出来ました！
バグの件までわざわざ教えていただいて、本当にありがとうございました！！
また、何かありましたら宜しくお願い致します！

回答No.2

noname#77303

こんにちは。

ソースをコピーして試してみました。
僕のパソコンだけなのかもしれませんが、「258 px;」のように、数値と単位の間の空白を全て無くした所、きちんと表示することが出来ました。
これが原因なのかもしれません。

確信が無かったのですが、Firefoxで数回確認した結果、確かなものだったので報告します。

補足

ありがとうございました！！
確かに大丈夫でした～！！
しかし、他の場所まで変わってしまいました。汗
こちらの方が正しい記述なのですよね～。
今から修正頑張ります！
本当、ありがとうございました！