floatを使ってコンテンツを3列にする

CSSのfloatを使ってボックスを3列横並びにします。

３ボックス目の右余白は、margin-right:-20px;でカットしています。

HTMl

<div class="mod_Grid3Box ex_clearfix">

<div class="mod_Grid3Box_inner">
<h3>タイトル</h3>
<p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p>
<p class="mod_caption">キャプション</p>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_Grid3Box_inner_end --></div>

<div class="mod_Grid3Box_inner">
<h3>タイトル</h3>
<p><img src="Grid_001.gif" width="220" height="132" alt="写真" /></p>
<p class="mod_caption">キャプション</p>
<p>説明文書等が入ります。説明文書等が入ります。説明文書等が入ります。</p>
<!-- mod_Grid3Box_inner_end --></div>

<div class="mod_Grid3Box_inner">
<h3>タイトル</h3>
<p>写真とキャプションをとりました。</p>
<!-- mod_Grid3Box_inner_end --></div>

<!-- mod_Grid3Box_end --></div>

CSS

.mod_Grid3Box{
	width:720px;
	margin-right:-20px;
}
.mod_Grid3Box_inner{
	width:220px;
	float:left;
	margin:0 20px 10px 0;
}
.mod_Grid3Box_inner h3{
	font-weight: bold;
	font-size: 1.4em;
	border-bottom:double 3px #000;
	margin:0 0 5px 0;
}
.mod_Grid3Box_inner p.mod_caption{
	color:#666;
	padding:0 0 5px 0;
}