idとclassで表示が変わる

質問

お世話になります。
HPで以下のようなページを製作中です。
----------------------------------
　　　　　　Name1
　photo　　説明文説明文説明文
　　　　　 　説明文説明文説明文
　　　　　　　　　　　　 　　　Next
----------------------------------
　　　　　　Name2
　photo　　説明文説明文説明文
　　　　　 　説明文説明文説明文
　　　　　　　　　　　　 　　　Next
----------------------------------
画像のように作れないのでわかりにくいかと思いますが、図のように
左にサムネイル画像があり、右側に写真の名前、その下に説明文、
一番下に「次へ」というボタンがきます。
1PにこのBOXが縦に5個ずつ並ぶようにしたいのですが、HTMLとCSSはこのような感じで作っています。
-----------------------------------------------------
<div id="box">
<a href=""><img src="name1.jpg" alt="写真1" width="132" height="90" class="leftimg" /></a>
<h2>Name1</h2>
<p>説明文説明文説明文説明文説明文説明文説明文説明文説明文<br />
<a href=""><img src="next.gif" alt="次へ" width="110" height="20" class="rightimg" /></a></p>
</div>
-----------------------------------------------------
#box {
clear: both;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
padding: 5px;
width: 620px;
height: 95px;
}
#box h2 {
color: #4A111C;
font-size: 12px;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
}
#box p {
font-size: 12px;
margin: 0px;
padding: 0px;
}
---------------------------------------------
今はこの5つをidとしていますが、1ページに同じidをつけるのはまずいかと思い、div classに変更しようとするのですが、idで指定したときと同じような表示になりません。
classの場合は#の代わりに以下のようにドットに変更すれば同じ表示になるのかと思っていましたが違うのでしょうか？
.box {

ちなみに、本によっては1ページに同じidを何度か繰り返して使っているものもありますが、idのままでもかまわないのでしょうか？
このソースでおかしい場合はご指摘いただけると助かります。

よろしくお願い致します。

回答No.2

leap_day · ベストアンサー

こんにちは

<div class="box>とか綴り字間違いとかしていたのではないですかね？
これだと.boxが利かなくなって幅一杯にはなっていましたけど・・・
ちょっとよくわかりませんね（－－；）

一応IE,Firefox,Operaで見てみましたが大体同じになりますね
（ブラウザのpx定義で少し表示サイズは異なりますが）
ただ一点.rightimg、.leftimgの左の余白・・・全角スペースが入っているようなのでFirefoxでうまく表示できていませんでしたので削除してください

お礼

どうもありがとうございました。
実験もしていただいたようで、お手間をおかけしました。
ここれで不安も解消し、すっきりしました。
どうもありがとうございました！

回答No.1

leap_day

こんにちは

#box（id）、.box（class）どちらも同じような表示になっているように思えるのですが・・・
#boxは３つとも.boxに変えていますよね？
<div class="box">にしていますよね？
imgの位置調整は載っていませんが.leftimg、.rightimgでしているのですよね？
どういった風に表示が違うのでしょうか？書いていただけると答えやすいと思います

もしこの５つの他に<div>がないのであれば
div { } div h2 { } div p { }でもできますよ（＾＾）

補足

回答ありがとうございました。

今もういちどclassに変更してみると、idと同じ表示になりました・・
すみません。どこが間違っていたのか・・

この5つのBOXは640ピクセルのmainというdivの中に入れていたのですが、id指定の場合は620pxのboxに収まっているものが、class指定にすると640いっぱいに広がっていたのです。

ちなみに書き忘れていたimgのcssは以下の通りです。
--------------------------------------------
.leftimg {
float: left;
margin-right: 0.5em;
　　margin-bottom:0.5em;
border: 1px solid #999999;
}
.rightimg {
　　float: right;
　　margin-left: 0.2em;
　　padding: 0px;
　　margin-top: 1.2em;
}
--------------------------------------------
特に問題なくclassで指定できるならidよりclassの方が
いいのですよね？

これでcss上での問題はありませんでしょうか？
こういうものは今までtableを使っていたのでイマイチ不安・・

よろしくお願いします。