まず，XHTMLでのマークアップは次のような感じです。

<dl class="recent">
  <dt>2008-05-12</dt>
  <dd>ページ5を更新しました。テキストテキストテキスト。</dd>
  <dt>2008-05-10</dt>
  <dd>ページ4を更新しました。テキストテキストテキスト。</dd>
  <dt>2008-05-07</dt>
  <dd>ページ3を更新しました。テキストテキストテキスト...。</dd>
  <dt>2008-05-06</dt>
  <dd>ページ2を更新しました。テキストテキストテキスト...。</dd>
  <dt>2008-05-04</dt>
  <dd>ページ1を更新しました。テキストテキストテキスト。</dd>
</dl>

基本形

dl.recent dt {
  clear: left;
  float: left;
  width: 7em;
}

dl.recent dd {
  margin-left: 7em;
}

次の点に注意してください。

• dt で前の float を clear します。
• 表示フォントサイズを大きくしても折り返さないように，dt の width は em で。
• 同様に dd の margin も em で。
• 基本的に横方向の margin, padding, width を em で指定しておくとよいでしょう。

縦方向の間隔をとる

dl.recent dt {
  clear: left;
  float: left;
  width: 7em;
}

dl.recent dd {
  margin-left: 7em;
  margin-bottom: 10px;
}

dd にmargin-bottom: 10px;をとります。dt に縦方向の margin をとると，IE以外のブラウザでズレが出ます。

dl.recent dt {
  clear: left;
  float: left;
  width: 7em;
  margin-bottom: 10px;
}

dl.recent dd {
  margin-left: 7em;
}

このズレを出さないためには，

• 縦方向の margin, padding, border, height の総計が，dd のほうが（dt よりも）高くなるようにします。

IE6, 7 では，このズレは出ません。

dtの横に隣り合う部分がIE6で3px右にずれる

IE6では，floatした dt の横に隣り合う部分，dd の1行目が右にずれます。

dd のほうに zoom: 1; をあてることでズレは一応解消します。しかし，この方法は，他のところで支障がでる場合があるので，注意して使ってください。

dl.recent dt {
  clear: left;
  float: left;
  width: 7em;
}

dl.recent dd {
  margin-left: 7em;
  margin-bottom: 10px;
  zoom: 1;
}

dtにborderを入れる

dl.recent dt {
  clear: left;
  float: left;
  width: 7em;
  padding: 2px 0.5em;
  border-left: solid 0.5em #CCC;
  border-top: solid 1px #CCC;
}

dl.recent dd {
  margin-left: 8.5em;
  margin-bottom: 10px;
  padding: 3px 0;
}

border-width も左右は em で指定し，

• dtのwidth + dtの左右のpadding + dtの左右のborder-width = ddの左のmargin

となるようにしています。

縦方向の margin, padding, border も dt と dd で位置が合うように，また dt が dd より高くならないように調整します。

dt, ddを通してborderを入れる

dl.recent dt {
  clear: left;
  float: left;
  width: 7em;
  padding: 10px 0.5em;
}

dl.recent dd {
  margin-left: 0;
  padding: 10px 0.5em 10px 8em;
  border-bottom: solid 1px #CCC;
}

dd の左の余白を margin ではなく padding にすることによって，左隅から border が引かれます。

この場合 dd に zoom: 1; をあてると，dd がさらに 8em（borderも含めて）右に寄ってしまうので注意してください。

表示フォントサイズの変更に対応するには

dt を float した場合，ブラウザの表示フォントサイズを大きくすると，レイアウトが崩れることがよくあります。

横方向の長さを em で指定することで，表示フォントサイズの変更にある程度まで対応できるでしょう。

また，dt と dd の line-height や font-size を同じにしておくと，dt が dd より高くなってずれるというトラブルも起きにくくなります。

参考

各ブラウザでの表示を確認できるように，以下に同じ内容をまとめておきましたので，参考にしてください。

• CSS - dtをfloatする場合の注意点 | Try | d-spica