floatさせた要素をレンガ風に整列してくれるjQuery MasonryのデモのCSS

CSSはこんな感じ: /* 以下classの設定 */
.wrap{: width: 880px;; padding: 10px;; background: #EEE;; overflow: auto;
}
.box{: width: 190px;; margin: 5px;; padding: 10px;; float: left;; background: #424242;; color: #FFF;; display: inline; /* IE6 fix */
}: /* 以下class以外の全体の設定 */
body {: font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳＰゴシック","MS PGothic",Sans-Serif;; font-size: 75%;; line-height: 150%;; margin: 20px 50px;; color: #333;
}
html>/**/body {: font-size: 12px;
}
* + html body {: font-family: "メイリオ","Meiryo";
}
a:link {: text-decoration: none;; color: #2D88B3;
}
a:visited {: text-decoration: none;; color: #2D88B3;
}
a:hover {: text-decoration: underline;; color: #2D88B3;
}
a:active {: text-decoration: none;; color: #9F81D9;
}
h1 {: padding: 10px 0; font-size: 180%;
}
#contents {: padding: 20px 20px 40px;
}
h2 {: font-size: 133.3%;; margin-bottom: 10px;
}

HTMLのソースはこんな感じ
色わけと省略しています。

<h2>色分けしています</h2>

<p>Rod自身が分かりやすくする為に、色分けをします。</p>

<p>色分けしないと、分からないものはわかりません。また、このページは参考サイト：CSS Lecture様のデモページを参考に作らせていただきました。</p>

</div>

-----------------------------------------------------------------------------

<h2>2つ目のboxのstyle</h2>

<p>HTML<span class="style3">　<div style="</span>float:none; position: absolute; display: block; <span class="style1">top: 0px; left: 220px;</span> background-color:#000;<span class="style3">" class="box"></span></p>

</div>

-----------------------------------------------------------------------------

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</div>

全てのdivのclass="box"は全て同じ。<div>タグ内のstyleで、個別にtopやleftなどを決めている。