まず，マークアップは次の通り

<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 の 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 を。dt に margin-bottom をあてるとずれる。（IE以外）

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

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

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

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

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

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

• この場合は 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

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する場合の注意点 | d-spica も参考にしてください。