position属性のfixedって(・∀・)ｲｲ!!

CSS

いつまでかかるのかわからない実験部屋のリニューアルですが(；^ω^)
新しいのはメニューバーを左サイドに据えてまして。
で、そのコンテナのposition属性をfixedにして、表示位置を固定させてるんですが、
この方法でやると、よくあるフレーム使った

  • 左側フレームにメニューを配置
  • 右側フレームにメインコンテンツ

みたいなのがフレーム使わずに出来るんですね。
まだまだ利用率No1のIE6は、position:fixedがサポートされてないんで、
IE6でも表示が崩れない様に対応してやらないと駄目ですが、
その他の主だったブラウザ*1は、サポートされてる*2様なんで
これからは、実験部屋に限らず積極的に使っていこうかなって思いました。

サンプルソース

興味のある方は試してみて下さい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>fixed sample</title>
<style type="text/css">
#menubar {
	float: left; position: fixed;
	top: 20px; left: 20px; /* 表示位置を指定 */
	width: 200px;
	border: solid 1px #dcdcdc;
	background-color: #fffacd;
}
#main {
	padding : 10px;
	height: 2000px; /* 縦スクロールさせる為にあえて2000pxにしてます */
	float: left;
	margin-left: 220px;
	border: solid 1px #dcdcdc;
	background-color: #f5f5dc;
}
</style>
</head>
<body>
<div id="menubar">
	<ul>
		<li>menu1</li>
		<li>menu2</li>
		<li>menu3</li>
	</ul>
</div>
<div id="main">
	<p>今日も色々忙しかったなぁ</p>
	<p>それはそうと、もうすぐあの面倒なDB作らなきゃいけない時期だ</p>
	<p>凄く気を遣うので嫌な作業なんだよなぁ…</p>
</div>
</body>
</html>

*1:IE7、Firefox、Opera、Safari

*2:最新Versionでは