固定幅でセンタリングされた要素の横にタブ風メニューをくっ付けるCSS 
個人的にはリキッドデザインの方が好きなんですけどね。
ウィンドウをリサイズした時、ウィンドウではなく固定幅でセンタリングされたコンテンツに追随するようにメニューだのバナーだのをくっ付ける方法をば。
とりあえず以下の3点、
- validなCSSである事
- CSSハックを使わない
- IE6にも対応させる
これを前提で。
↓サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タブメニューサンプル</title>
<style type="text/css">
div#main_contents {
width:600px;
height:1000px;
margin:0 auto;
background-color:#ddd;
}
div#menu {
height:0;
position:relative;
}
div#menu ul {
margin:0;
padding:0;
width:3em;
position:absolute;
left:-3em;
}
div#menu ul li {
list-style-type:none;
background-color:#ddf;
margin:2px 0;
padding:0;
}
</style>
</head>
<body>
<div id="main_contents">
<div id="menu">
<ul>
<li>いち</li>
<li>にぃ</li>
<li>さん</li>
<li>よん</li>
</ul>
</div>
ほにゃららら。
</div>
</body>
</html>
強調部分がポイント。応用利かせれば右側に引っ付ける事も出来ますね。IE6を無視すればもうちょい簡単に出来ますが……。
