dt ddの横並びサンプル

CSSコードはブラウザの「ソースの表示」から見てください。

サンプル1 （borderを使った縦ライン）

dtのテキスト量が多い場合・・・縦ボーダーが途切れる。FireFoxだとddはdtの高さに合わせてくれない。
ddのテキスト量が多い場合・・・縦ボーダーが途切れる。dtはddの高さに合わせてくれる。

サイト名
web bibo（ウェブビボ）
URL
http://www.webbibo.com/
概要
CSS（スタイルシート）に関する知識・テクニックなどの備忘録

サンプル2 （backgroundを使った縦ライン）

dtのテキスト量が多い場合・・・縦ボーダーは途切れないが、FireFoxだとddはdtの高さに合わせてくれない。
ddのテキスト量が多い場合・・・縦ボーダーは途切れない。dtはddの高さに合わせてくれる。

サイト名
web bibo（ウェブビボ）
URL
http://www.webbibo.com/
概要
CSS（スタイルシート）に関する知識・テクニックなどの備忘録

サンプル3 （縦ラインはbackground・横ラインはborder）

dtのテキスト量が多い場合・・・縦ボーダーは途切れないが、IE6だとddはdtの高さに合わせてくれない。
ddのテキスト量が多い場合・・・縦ボーダーは途切れない。dtはddの高さに合わせてくれる。

サイト名
web bibo（ウェブビボ）
URL
http://www.webbibo.com/
概要
CSS（スタイルシート）に関する知識・テクニックなどの備忘録

サンプル4 （float未使用・縦ラインはbackground）

dtのテキスト量が多い場合・・・縦ボーダーは途切れない。ddはdtの高さに合わせてくれる。
ddのテキスト量が多い場合・・・縦ボーダーは途切れない。dtはddの高さに合わせてくれる。
※line-heightとmarginを使って横に並べてるので、行間とか項目間の高さがブラウザによって違うかもしれない。

サイト名
web bibo（ウェブビボ）
URL
http://www.webbibo.com/
概要
CSS（スタイルシート）に関する知識・テクニックなどの備忘録

サンプル5 （サンプル4に横ラインを付けたもの）

dtのテキスト量が多い場合・・・縦ボーダーは途切れない。ddはdtの高さに合わせてくれる。
ddのテキスト量が多い場合・・・縦ボーダーは途切れない。dtはddの高さに合わせてくれる。
※line-heightとmarginを使って横に並べてるので、行間とか項目間の高さがブラウザによって違うかもしれない。

サイト名
web bibo（ウェブビボ）
URL
http://www.webbibo.com/
概要
CSS（スタイルシート）に関する知識・テクニックなどの備忘録