脱フロート
CSSでレイアウトするのに不可欠と言っていいフロート（float）
クリアーをしないとレイアウト崩れるし、初心者にはちと厄介ですね。
全部というわけにはいかないけれど、極力フロートをつかわないでやってみるページです。
「同サイズの左右のボックスの繰り返し」
左右のボックスにクラスつけてfloat:left?テーブル?
せっかくなのでdl,dt,ddあたりをつかってみましょう。
HTMLソース
<dl id="sitemap">
<dt><a href="sitemap.html">左ボックス</a></dt>
<dd>右ボックス</dd>
<dt><a href="sitemap.html">左ボックス</a></dt>
<dd>右ボックス</dd>
</dl>
CSS
#sitemap dt a{
color:#339900;
font-size:14px;
width:150px;
line-height:50px;
display:block;
}
#sitemap dd{
padding-left:1em;
font-size:12px;
margin-left:150px;
margin-top:-51px;
line-height:50px;
}
マイナスのマージンで無理矢理同じラインに表示しています。
フォントサイズが違う場合表示位置がずれるのでheightやline-heightで調節してくださいませ。
