[デモ] 高さを揃えるCSSを利用した横並びリスト

<!-- 1. 背景色のみ -->
<ul>
	<li>あああああああああああああああああああああああ</li>
	<li>あああああああああああああああああああああああ</li>
	<li>あああああああああああああああああああああああ</li>
</ul>

/**
 * 1. 背景色のみ
 */
ul {
	width: 660px;
	margin: 0 0 20px;
	overflow: hidden;
}

ul li {
	float: left;
	width: 200px;
	margin: 0 20px -32768px 0;
	padding: 0 0 32768px;
	list-style: none;
	background: #CEDBEA;
}

<!-- 2. ボーダー付き -->
<ul>
	<li>あああああああああああああああああああああああ</li>
	<li>あああああああああああああああああああああああ</li>
	<li>あああああああああああああああああああああああ</li>
</ul>

/**
 * 2. ボーダー付き
 */
div#andBorder ul {
	width: 660px;
	margin: 0 0 20px;
	border-bottom: 1px solid #00F;
	border-left: 1px solid #00F;
	overflow: hidden;
	zoom: 1;	/* Clearfix for IE */
}

div#andBorder ul li {
	float: left;
	width: 199px;	/* ボーダーと合わせて200px */
	margin: 0 0 -32768px;
	padding: 0 10px 32768px;
	list-style: none;
	border-top: 1px solid #00F;
	border-right: 1px solid #00F;
	background: #CEDBEA;
}

<!-- 3. ボーダー付き (ulをdivで括るver) -->
<div>
	<ul>
		<li>あああああああああああああああああああああああ</li>
		<li>あああああああああああああああああああああああ</li>
		<li>あああああああああああああああああああああああ</li>
	</ul>
</div>

/**
 * 3. ボーダー付き (ulをdivで括るver)
 */
div {
	width: 660px;
	margin: 0 0 20px;
	padding: 0 0 1px;
	background: url('border.gif') 0 100% no-repeat;
}

ul {
	overflow: hidden;
	zoom: 1;	/* Clearfix for IE */
}

ul li {
	float: left;
	width: 198px;	/* ボーダーと合わせて200px */
	margin: 0 20px -32768px 0;
	padding: 0 0 32768px;
	list-style: none;
	border: 1px solid #00F;
	background: #CEDBEA;
}