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;
}