dt要素にfloatとclearを同時に指定する

XHTMLソース

<dl class="dictionary">
 <dt>ホームページ</dt>
 <dd>
  ブラウザを利用して閲覧する Webページの最初のページ。
  Web ページ自体を総称してホームページと呼ぶ場合も多い。
 </dd>
 <dt>パーソナル-コンピューター</dt>
 <dd>
  個人で使用する、もしくは個人で購入できる程度の卓上用の小型コンピューター。パソコン。
 </dd>
 <dt>回線</dt>
 <dd>
  電信・電話をつなぐ線。
 </dd>
</dl>

CSSソース

dl.dictionary {
     float: left;
     width: 500px;
     padding: 1px 1px 0;
     border: 1px solid #C0C217;
     color: #333;
}
dl.dictionary dt {
     float: left;
     clear: both;
     width: 130px;
     margin-right: 10px;
     margin-bottom: 1px;
     padding: 5px 0 5px 10px;
     font-weight: bold;
}
dl.dictionary dd {
     float: left;
     width: 340px;
     margin-bottom: 1px;
     padding: 5px;
     background: url(img/bg.gif) repeat-y;
}

borderと背景画像を利用して立体的な表を実現する

XHTMLソース

<dl class="dictionary">
 <dt>ホームページ</dt>
 <dd>ブラウザを利用して...（略）</dd>
 <dt>パーソナル-コンピューター</dt>
 <dd>個人で使用する...（略）</dd>
 <dt>回線</dt>
 <dd>電信・電話をつなぐ線。</dd>
</dl>

CSSソース

dl.dictionary {
     width: 530px;
     background: url(img/bg.gif) repeat-y;
     border: 1px solid #999;
     border-top: 0;
}
dl.dictionary dt {
     float: left;
     width: 160px;
     padding: 5px 10px;
     background: url(img/white.gif) repeat-x;
     border-top: 1px solid #999;
     font-weight: bold;
}
dl.dictionary dd {
     margin: 0;
     margin-left: 170px;
     padding: 5px 10px;
     background: url(img/white.gif) repeat-x;
     border-top: 1px solid #999;
     border-left: 1px solid #999;
     color: #454545;
}

• 第5章 実践的なCSSデザインの法則