divの右側にあるdivの高さを修正してください

Question

私はプロジェクト（クラスmain）の詳細を表示するためのdivを持っています。今私は2列にする必要があります。右左 。私は30px widthとheight 100% &の 'auto'とfix in rightと右のdivを修正する必要があります。左の列height:autoおよびoverflow:hidden。

HTML：

<div class="main"> 
<div class="right"> 
</div> 
<div class="left"> 
.... Descripton ..... 
</div> 
<div> 

CSS：

.main {width:300px; height:auto; overflow:hidden;margin:0 auto;} 
.right{width:30px; float:right; height:auto; background-color:#e1e1e1; } 
.left{width:270px; float:right; height:auto;} 

Onlineは私の問題をデモ：この中HERE私はその背景色と右のdivを参照してくださいdidintます。＃e1e1e1。

私はこのする必要があります：HERE

感謝を。

Answer 1

ある例である：http://jsfiddle.net/fbUQB/。それはあなたが求めているのでしょうか？

Answer 2

絶対位置（絶対位置）で作業する必要があります。

フロート：左/右はここではなく、虐待

<div style="position:relative;width:300px; height:200px;margin:0 auto; background-color:#00ff00;"> 
<div style="position:absolute; right:0; top:0;background-color:#ff0000;color:#000;"> Your right content 
    </div> 
    &nbsp; 
    <div style="position:absolute; left:0; top:0;background-color:#0000ff;color:#000;"> 
    Left content 
    </div> 
</div> 

Answer 3

だから、私は、あなたはライトグレーの背景を持つ右の列でお互いに2つの列を作りたいと思う。

これらは両方とも高さ100％でなければなりません。 100％高いものを作るには、htmlとbodyタグを100％に設定する必要があります。

私はthis jsfiddleと思っています。バックグラウンドカラーを少し変更してもらえませんか？そして、左の列をoverflow: autoに設定してテストします。