画像の様なテーブルレイアウトにするには？
画像の様なテーブルレイアウトにするにはどうすればいいのでしょうか
IE9なら正しく表示されます。
何処を修正したかも教えて下さい
＊＊＊＊＊＊＊＊＊＊＊＊＊＊index.html＊＊＊＊＊＊＊＊＊＊＊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<link rel="stylesheet" type="text/css" href="css/base.css" >
</head>
<body>
<div id="page">
<div id="header">
<p>header</p>
<!-- /#header--></div>
<div id="contents">
<!--メインコンテンツ（商品リスト）-->
<div id="main">
<ul id="products-list">
<!-- 商品情報 -->
<li class="products">
<dl>
<dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt>
<dd>商品名</dd>
<dd>価格：¥200,000</dd>
<dd><a href="#">商品詳細ページ</a></dd>
<dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd>
</dl>
</li>
<!-- // 商品情報 -->
<!-- 商品情報 -->
<li class="products">
<dl>
<dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt>
<dd>商品名</dd>
<dd>価格：¥200,000</dd>
<dd><a href="#">商品詳細ページ</a></dd>
<dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd>
</dl>
</li>
<!-- // 商品情報 -->
<!-- 商品情報 -->
<li class="products">
<dl>
<dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt>
<dd>商品名</dd>
<dd>価格：¥200,000</dd>
<dd><a href="#">商品詳細ページ</a></dd>
<dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd>
</dl>
</li>
<!-- // 商品情報 -->
<!-- 商品情報 -->
<li class="products">
<dl>
<dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt>
<dd>商品名</dd>
<dd>価格：¥200,000</dd>
<dd><a href="#">商品詳細ページ</a></dd>
<dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd>
</dl>
</li>
<!-- // 商品情報 -->
<!-- 商品情報 -->
<li class="products">
<dl>
<dt><a href="#"><img src="img/1.jpg" alt="" class="product-img" /></a></dt>
<dd>商品名</dd>
<dd>価格：¥200,000</dd>
<dd><a href="#">商品詳細ページ</a></dd>
<dd><a href="#"><img src="cart.jpg" alt="ショッピングカート" width="" height="" /></a></dd>
</dl>
</li>
<!-- // 商品情報 -->
</ul>
<!-- /#main--></div>
<!--メインコンテンツ（商品リスト）-->
<div id="sub">
<p>sub</p>
<!-- /#sub--></div>
<!-- /#contents--></div>
<div id="footer">
<p>footer</p>
<!-- /#footer--></div>
<!--/#page --></div>
</body>
</html>
＊＊＊＊＊＊＊＊＊＊＊＊＊base.css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
/* CSS Document */
body{
text-align:center;
}
#page{
width:860px;
height:600px;
margin:0 auto;
background:#690;
text-align:left;
}
#header{
width:860px;
height:100px;
background:#D1D1DE
}
#contents{
width:840px;
height:380px;
margin:10px;
padding-left:0;
background:#690;
}
#main{
float:right;
width:570px;
height:380px;
background:#fff;
}
#sub{
float:left;
width:260px;
height:380px;
background:#fff;
}
#footer{
width:860px;
height:100px;
clear:both;
background:#fff;
background:#D1D1DE
}
.products{
list-style-type:none;
float:left;
width:130px;
margin:10px 0px 0px 10px;
padding:0px;
height:170px;
background:#F3F59C
}
.product-img{
margin:0px;
padding:0px;
width:50px;
height:50px;
text-align:center;
border:none;
}
#products-list{
margin:0px;
padding:0px;
}
