並んだ２つのfloatボックス、片方を固定位置にしたい

質問

floatでボックスを２つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。

現在、このfloatの２つのボックスは、大きなボックスで囲んでおり、
topから160pxの余白をとっています。
また、この大きなボックスは、常にセンターにある状態です。

・トップから常に160pxのマージンが欲しい
・左側の余白は、ブラウザの大きさに寄ってかわる（センタリングの為）
・右のボックスは自由に動く。

この状況で、左のメニューだけを固定することは可能でしょうか。
教えてください。

現在ソースは下記のようにしております。

【HTML】

<div id="container">

<div id="gNavi"> 固定したいメニューBox </div>
<div id="main"> スクロールするぐらいの長文Box　</div>

</div>

【CSS】

* {
margin:0 ;
padding:0;
}

body {
text-align:center;
}

#container {
width:894px;
margin:160px auto 65px auto;
}

#gNavi {
position:fixed;
float:left;
top:160px;
left:auto;
width:175px;
}

#main {
float:left;
width:716px;
margin:0 0 0 2px;
text-align:left;
overflow:auto;
}

回答No.1

leap_day · ベストアンサー

こんにちは

もっとも単純なのは#mainにheight指定してやってoverflow:auto;を利用した右側ボックスだけのスクローリングです

あとはjavascriptを使用して（『javascriptメニュー固定』などで検索すれば出てきます）メニューをposition:absolute;で固定する方法ですかね？
こちらはスクロールのたびに微調整されるので完全固定とはいきませんが・・・

余談ですが・・・floatしているので

#gNavi {　}内の
position:fixed;
top:160px;
left:auto;

はあまり必要ないかな（？）とは思うのですが

topから160pxというのが#containerのtopからなら
#container { position:relative; }
#gNavi {
position:absolute;
top:160px;
left:0px;
}
#main { float:right; }
になると思います

お礼

ありがとうございます。
>もっとも単純なのは#mainにheight指定してやってoverflow:auto;
そうですよね。
でも、このスクロールではなく、ブラウザ全体のスクロールを望んでいます。
又、javascriptだと、あのずれが気になるため、やはりcssで出来ればと考えています。

left:0px;

ですと、この左のボックスは、左よりになってしまうようです。

んー、overflow:autoでやってみることにします。
ありがとうございました。