【#base/#main/#header】
※画像を配置
【#base/#main/#contents】
css_split2_horizon
仕様
幅700px、左上固定、横2分割部分スクロール
デザイン上の注意
上【#navigation】には、背景の指定をし、かつ本体【#main】の横幅以上のサイズを持たせないと、【#main】が【#navigation】の下をくぐり抜けているのが見えてしまう。
position:fixedでの固定位置は、ブラウザによって親要素を参照したりブラウザを参照したりする。
- IE6、IE7はブラウザを参照
- Opera、Firefox、Safariは親要素を参照
そのため、Fixedは一番親の要素に対してのみ用い、位置あわせは必要に応じて子要素で工夫する。左上基準で固定するレイアウトがもっともシンプルに作れる。
備考
IE7、Opera、Firefox、Safariでは完全動作
IE6では、【#navigation】【#base】が一緒にスクロールする