固定幅で左に2列、動的幅で右に

Question

私はブラウザの幅の100％のセクションを持つ必要があるコンテンツを実装しようとしています。 200pxの幅とそれの右の私はブラウザの幅に応じて動的な幅のdivを持つ必要があります。 例.. browser = 900px - > left div 200px right div 700px。 そして、div要素の両方が、私は彼らに入れどのくらいの情報によって動的な高さを持っている...ラッパーのdivは、これらの2のdivの高さの最大がかかります。..

これまでのところ、私はこの HTML

<section id="wrapper"> 
    <div id="list"> 
    </div> 
    <div id="grid"> 
    </div> 
</section> 

のような何かをしました

CSS

#wrapper { 
    width: 100%; 
    min-width: 1000px; 
    margin: 0 auto; 
    padding: 40px 0; 
    overflow: hidden; 
} 

は、今私は#listと#grid divをCSSにする必要があります。後で私は#grid div内で同じことをするので、効率的な解決策があることを願っています:)

ありがとう、ダニエル！

Answer 1

あなたはCSSでそれを行うことができます。トリックは、浮動小数点（左のdiv）と非浮動小数点（右のdiv）を使用することです。また、左（浮動）divには最小の高さが必要です。そうでなければ、左にコンテンツがない場合、右（非浮動）divは左列のスペースをとります。

EDIT：右<div>は、以下のルールを持っている必要があります。

overflow: hidden; 
display: block; 

overflow: hiddenがそうでなければ、その内容は左のdivの周りを流れるだろう、カラムとして振る舞うDIV右になります。 #wrapperが<div>のデフォルトの幅は100％であるので、（あなたが言ったので、それがブラウザウィンドウの幅いっぱいになります）幅を必要とし、また、その余白を削除しないことを

は注意してください。

ここでは例を示します（HTML5以外のブラウザでは<section>を<div>に変更しましたが、同じです）。

すべての要素を区別するために背景色を配置しました。

http://jsfiddle.net/pmv3s/1/

ここで、フルスクリーン版である：http://fiddle.jshell.net/pmv3s/1/show/light/

CSS：

#wrapper { 
    padding: 40px 0; 
    overflow: hidden; 
    background-color: red; 
    min-height: 5px; 
} 
#list { 
    float: left; 
    width: 200px; 
    background-color: green; 
    overflow: hidden; 
    min-height: 100px; 
} 
#grid { 
    display: block; 
    float: none; 
    background-color: blue; 
    min-height: 100px; 
    overflow: hidden;  
} 

Answer 2

jQueryをちょっと使っているあなたのための解決策は、あなたの問題に純粋なCSSソリューションがあるとは思えませんが（私は間違っているかもしれません）。

http://fiddle.jshell.net/L32uj/