デザインレイアウト 11

キャプション

タイトル
テキスト
テキスト
テキスト
テキスト
テキスト

※このテンプレートはスクロールタイプです。左右のボックスは同じ高さにしてください。

--- HTML ---
<div id="box">
<div><img src="img/pict.jpg" alt="">
<p>キャプション</p>
</div>
<dl>
<dt>タイトル</dt>
<dd>テキスト</dd>
</dl>
</div>

--- CSS ---
#box {
 width:462px;
 font-size:80%;
}

#box dl {
 width:310px;
 height:128px;
 margin:0;
 padding:0;
 background:#fff;
 border:1px solid #ccc;
 float:left;
 overflow:auto;
}

#box dt {
 margin:0;
 padding:5px;
 background:#eee;
 border:dotted #ccc;
 border-width:0 0 1px 0;
}

#box dd {
 margin:0;
 padding:5px;
 line-height:1.32em;
}

#box div {
 min-height:128px;
 height:auto !important;
 height:128px;
 width:130px;
 border:1px solid #ccc;
 float:right;
}

#box div img {
 margin:10px 10px 5px;
}

#box div p {
 margin:0 10px;
 font-size:85%;
 text-align:center;
 line-height:1.32em;
}