CSSでのﾚｲｱｳﾄについて教えてください｡出来ればfloatを用いてhttp://www.fastpic.jp/images/242/4294128134.gif ←このようなﾚｲｱｳﾄにしたいと考えています｡(…

CSSでのﾚｲｱｳﾄについて教えてください｡出来ればfloatを用いてhttp://www.fastpic.jp/images/242/4294128134.gif ←このようなﾚｲｱｳﾄにしたいと考えています｡(色のついたそれぞれのﾎﾞｯｸｽはdivで作成しています)
ｻｲﾄは知人に依頼されて作成しており､知人はHTMLやCSSに関する知識が皆無なのですが今後の更新は知人がすることになっている為､分かりやすいようにそれぞれのdivには同一のclass名を使用したいと考えています｡
また､それぞれのdivの順番が変わる可能性･新たに追加される可能性があります(この為divのclass名を同一にしたいです)｡
divのheightはその時々で異なるのでheightの指定はできません｡
まず､.Box {float: left; margin-bottom: 35px; width:300px;}と指定してみたのですが､floatの特性上http://www.fastpic.jp/images/164/5416812375.gif ←という風になってしまいます｡

なんとかして､heightを指定せず･同一のclass名で､最初に提示したようなﾚｲｱｳﾄを作成することはできないでしょうか？もしfloat以外の方法があるなら教えていただけると幸いです｡よろしくお願いいたします｡

とりあえず､IE7+対応ということで､ｻﾝﾌﾟﾙです｡

http://jsfiddle.net/x3L2h/

問題は､ﾎﾞｯｸｽの数だけCSSﾙｰﾙを書かなきゃいけないということです｡あらかじめ｢これ以上は増えないだろう｣という数だけﾙｰﾙを書いておくしかないですね｡

nth-childを使えばもっとｽﾏｰﾄですが､そうするとIE全滅です｡

IE6にも対応させたい場合は､お返事ください｡

ｺﾒﾝﾄ欄で質問を下さったのにお返事が遅れてしまい申し訳ございません｡

ｻﾝﾌﾟﾙ拝見しました！思った通りのﾚｲｱｳﾄに仕上がっていて感動しました｡

で必要な分追加していくんですね｡

ですが出来たらIE6.0にも対応させたいと考えております｡

もし方法がございましたらご教授ください｡

IE6に対応しました｡

http://jsfiddle.net/x3L2h/4/

ｲﾝﾗｲﾝﾌﾞﾛｯｸを使用しています｡

問題は､ﾌﾞﾗｳｻﾞによってﾌﾞﾛｯｸとﾌﾞﾛｯｸの間に隙間が空くことです｡そのためﾗｯﾊﾟｰのﾎﾞｯｸｽは少し大きめにwidthを設定する必要があります｡

素晴らしいです…！！これで知人にも分かりやすい構成でHTMLを記述することができます｡

wrapperは大き目にですね｡了解いたしました｡

ﾎﾟｲﾝﾄの手持ちがなく申し訳ございません…｡

本当にありがとうございました｡