リストをテーブルみたいに使う

CSSの常套手段のひとつに、テーブルの代わりにリストを使うというものがあります。

「Cherry Pie Web」では、プロフィールのページで使っています。

-- HTML --
<dl>
<dt>CPU</dt>
<dd>HT Pentium4-2.60CMHz</dd>
<dt>PRINTER</dt>
<dd>ALPS MD-2010J</dd>
</dl>

-- CSS --
dl {
font-family: "ＭＳ Ｐゴシック", Osaka;
font-size: 14px;
line-height: 15px;
}
dt {
font-weight: bold;
color: #990000;
float: left;
width: 200px;
clear: both;
margin: 0px;
}
dd {
padding-left: 210px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
}

このように、dtタグに float属性をつけて、続くddタグを右に回り込ませると、テーブルっぽいレイアウトが実現できます。
dtタグにwidth属性をつけて幅を指定しないと、うまく回り込まないことがあります。
（テキストなど、幅が明確にならないものは、widthを指定しましょう）
ddタグには、padding:left で、左の空きを定義します。
padding で指定しておくと、dd に border属性をつけて線を引いたときに、dtタグまで含めて線を引くことができます。
（正確には、padding で指定した長さ）
margin で指定すると、ddタグの上下にだけ線が引かれます。
padding や margin を指定しなくても表示されますが、微妙な挙動をすることがあるみたいなので、指定したほうがいいと思います。

---

しかし・・・ここでやっぱり Mac IE で問題がおきました。
ひとつではありません。続々と問題がおきました。

・dl と dt の間に文字がないと、dd が回り込まない（1段ずれる・・・以下同じ）。
・dt の margin-bottom が 0 だと、dd が回り込まない。
・dt に float:left を指定すると、dd が回り込まない。
・dd が2行以上になると回り込まない。
・dt の対になる dd が2つ以上だと回り込まない。
・dl の直後の dt の位置が、position:absolute の位置（親要素の左上）になる。

はっきり言って、これじゃ使い物になりません。
あーもうだめだー　と思ったとき、ひとつの原因が思い浮かびました。
もしや・・・

はい、そうです。親要素の position 属性が relative だったんですねー
親要素を position:absolute にしてやると、うそのように、すべての問題が起こらなくなりました。

---

さて、次で、リストをテーブルみたいに使うための方法をもうひとつ紹介します。
しかし、これは実は危険なワザなのです･･･