floatした要素を親要素に対して左右ピッタリに収める

質問

タイトルのとおり、CSSのfloatを使ってある要素を横にレイアウトします。
この要素は増減します。マージンを使って要素の右に隙間を作りますが、一番右にくる要素にも同じマージンがつくので、親要素に対して右端に不要な隙間ができます。
３つ以上の要素をfloatを使って左右一杯に配置するにはどうすればいいのでしょうか。IE6をメインに、safari1.0やfirefoxでも実現できる方法を教えてください。

ソースはこんな感じです。

【HTML】
<div>
<p><img src="○○○○" width="150" height="150" /></p>
<p><img src="○○○○" width="150" height="150" /></p>
<p><img src="○○○○" width="150" height="150" /></p>
<p><img src="○○○○" width="150" height="150" /></p>
・
・
・
</div>

【CSS】
div{
width:800px;}
p{
width:150px;
float:left;
margin-left:50px;}

この場合、４つ目の要素の右にも50pxの空間ができます。
800pxの中に、均等割付けできればと思います。

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

回答No.2

warez

そうなると 4 の倍数個目の p にクラスを付けてマージンを削るしかなさそうですね。

CSS3 に対応しているブラウザなら、:nth-child で実現できそうな気はします。

補足

ありがとうございます。

確かに、それも考えましたが増えるたびにズラすようになるのでメンテナンス不要がいいなと思いました。

:nth-childについては全く分からないので調べてみます。

回答No.1

warez

意図している回答とは微妙に違う予感ですが、
> 800pxの中に、均等割付け
であるのならば

p {
width: 200px;
float: left;
text-align: center;
}

でどうでしょうか。

補足

ありがとうございます。
確かに、均等割付けになりますね。
ただ、p 要素の中は150pxの画像なので、左右の端に25pxの余白ができてしまいます。片方に50pxよりはキレイですが。
この場合は、親要素を850pxにすれば800pxに収まったように見えますが、他の上下の要素にも影響がでそうです。

また、説明を省略してしまったのですが、imgの後に<br />を入れそのキャプションテキストが入る予定です。テキストは左揃えにしたいと思ってます。

説明不足で申し訳ございません。