HTML/CSSで2つの比例列を作成するにはどうすればよいですか？

Question

2つの列のサイズが互いに比例し、重複しない2列レイアウトが必要です。左の列はその上に少々の内容しか表示されず、ページと共にスクロールする必要があります（スクロールするときにページと共に移動します）。右の列は多くのデータを持ち、スクロールバーはありませんブラウザはページを下にスクロールします。

以下の2つの例を組み合わせて、フォントのサイズを変更してコンテンツを変更すると、例2のように列は比例しますが、左側のコンテンツも必要です画面をスクロールして列2をすべて表示します（例1と同様）。

私が何を言っているか見るためにここに例を参照してください。

http://vershok.com/test_layout_20090610.html

私はどのように位置を表示するには、左のdivにjQueryのUIのカレンダーとの例を更新しました：一定;レイアウトは右の列correcltyのサイズを変更していない（それはそのdiv要素をオーバーフローするためのjQueryのカレンダーには問題があります。）私は2つの列がそれに比例している2列のレイアウトをしたい

http://vershok.com/test_layout2_20090610.html

互いのサイズが重なり合うことはありません。左の列はその上に少々の内容しか表示されず、ページと共にスクロールする必要があります（スクロールするときにページと共に移動します）。右の列は多くのデータを持ち、スクロールバーはありませんブラウザはページを下にスクロールします。

Answer 1

ページを分割するdiv要素を使用する場合は、この効果を達成することができ、そのような：position:fixedと

<div style='position: fixed;width: 20%;'> 
    Text for the left column. 
    Should scroll down the page 
</div> 
<div style='float: right; width: 80%;'> 
    *insert large content here. including table content if you want.* 
</div> 

Answer 2

要素は基本的にブラウザのウィンドウからの相対位置、絶対配置要素です。

これは、ドキュメントのフローから削除され、その要素の配置（またはサイズ変更）前後の要素には影響しないことを意味します。そのため、固定された位置要素が広すぎる場合、左の列の幅が変更されません。

ie6はposition:fixedをサポートしておらず、デフォルトはposition:staticに戻ります。 ie7は厳密なdoctypeを使用している場合にのみposition:fixedをサポートします。