あまりに酷いHTMLで参考にはならないですが・・・
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
幅の狭いディスプレイで見たら横スクロールが必要ですし、それはそれは酷いものです。
せっかくCSSの練習と称するなら、少なくとも最低限の技術は持ってほしいですね。
まあ、HTMLさえきちんと書かれていれば、思案する問題ですらありません。
たとえば、複数のグループに本文が分けられているなら、HTMLは
<body>
<div class="header">
・・・ヘッダ部分・・・
<div class="nav">
このページのインデックス
</div>
</div>
<div class="section"><!-- 本文 -->
<div class="section">
情報グループ
</div>
<div class="section">
情報グループ
</div>
<div class="section">
情報グループ
</div>
</div>
<div class="footer">
・・ページ情報・・・
<div class="nav">
サイト内ナビゲーション
</div>
</div>
</body>
のようにマークアップされているはずですね。
そしてそれぞれの情報は、リストにしておくと良いでしょう。
<div class="nav">
<h2>商品</h2>
<ol>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ol>
</div>
<div class="nav">
<h2>商品</h2>
<ol>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ol>
</div>
とか・・・。
とにかく、文書構造をしっかり確認して、それがわかるようにマークアップする。
スタイルシートは、それとは別に、それぞれ、この場合大きく三つに分けられれば、それぞれをabsoluteか何かで配置して、それぞれの項目グループを普通に並べればよいです。
示されたサイトのように、divのclass名を配置を意識して付けたり、リンクの目標でもないのに変な名称のIDをつける必要はありませんし、後日スタイルシートやソースを見ても、わからなくなります。自分でわからないのですから検索エンジンにもわからない。
div.header,div.section,div.footer{
width:100%;}
div.section div.section{
width:32%;
float:left;
}
div.section div.nav{
width:90%;
margin:5px auto;
border:solid blue 1px;
}
div.footer{
clear:left;
}
位で基本形はよいかと・・
