喫茶LAPON-β

サンプル

どうしてもtableやulではなくdlで横並びの新着情報を組みたい！
文字が大きくなっても崩れないように組みたい！
ということで頑張って組みました。
嘘です。
自分で頑張ってもうまくいかなかったので、
製菓の東京スイーツ＆カフェ専門学校さんを参考に組みました。

------
html
------
<div>
<dl>
<dt>2009年11月1日</dt><dd>ダミーの文章です。</dd>
<dt>2009年11月1日</dt><dd>ダミーの文章です。</dd>
</dl>
</div>

------
css
------
div{border:1px solid #999999; padding:20px 20px 10px 20px; overflow:hidden;}
* html .list{height:1%;}

dl dt,dl dd{margin-bottom:20px;}

dl dt{width:8em; float:left; clear:left;}
dl dd{margin-left:8em;}
* html dl dd{height:1%;}

ソースはこんな感じです。
一番のポイントはmargin-left:8emかな、と思いました。
文字が大きくなっても崩れないように、単位がemです。
※条件によってはpxでもOKかもです。

それからIE6に対するハックが二か所。

IE6の不具合のため、overflowは横幅か縦幅かheight:1%を指定する必要があるみたいです。
参考サイトIE6でよく遭遇するCSSのバグとその解決方法

それともう1つ。
IE6の不具合のためdtとddを横並びにするとddが3pxずれます。
これを解決するためにまた、height:1%を指定してます。
参考サイトIE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法

条件によってはこの方法使えないかも、ですが。
とりあえず解決ぞろりです。
今度からdlで組めます＾＾