【HTML/CSS】dt が回り込まないようにする方法

<dl><dd><dt>を使った表組レイアウトはfloatするだけ。と基本のオハナシで困ったのでメモ。

ハマったのは<dt>の文章が長くなったときに<dd>の下に流れ込むという現象。

結論から言うと以下。
「<dt>に<dd>分の左marginを設定せよ」



【解説】

border を指定したときに思う長さにならない時点で気づけば良かったのですが、<dd>の基点は<dl>なんですよね！

つまり、<div>のようにwidthを指定してfloat:leftする方式では

+--------++--------------+
| ←<dd> ||    ←<dt>    |

+--------+|              |
          |              |
          +--------------+


とはならず


+--------+------+
| ←<dd> |←<dt>|
+--------+      |
|               |
+---------------+

となっているわけです。
地味にハマったっつーの(基本か)




【参考】
http://d.hatena.ne.jp/language_and_engineering/20120312/p1