CSSのみできれいにブロックを並べる

シンプルなHTMLとCSSできれいに並んだリストブロックを組みます。
「シンプルな」というのが重要で、
HTMLはただのリスト（<ul><li>）を普通に組むだけ、
CSSでレイアウトを設定します。

CSS

#container {
	width: 1000px;
	margin: 0 auto;
}

#float-box ul {
	position: relative;
	margin: 0;
	padding: 0;
	margin-left: -25px;
}

#float-box li {
	float: left;
	width: 180px;
	height: 120px;
	margin: 0 0 25px 25px;
}

※レイアウトに必要なプロパティのみを書き出しました。

HTML

<div id="container">
	
	<div id="float-box">
		
		<ul>
			<li>リストブロック</li>
			<li>リストブロック</li>
			<li>リストブロック</li>
			<li>リストブロック</li>
			<li>リストブロック</li>
			<li>リストブロック</li>
			<li>リストブロック</li>
			<li>リストブロック</li>
			<li>リストブロック</li>
			<li>リストブロック</li>
		</ul>

	</div>

</div>

サンプルページはこちら

図解するとこのようになってます。

リストの親ブロックにネガティブマージンをつけてボックスの枠を仮想的に広げ、
そこにリストのマージンレフトを当てはめることで、
見かけ上は左右がきちっとそろったリストボックスができあがります。