css 左列自適應寬度的一行兩列布局

今天想實現一行兩列的布局，左列寬度自適應，右列寬度保持不變。HTML的寫法是：
<div id="main">
    <div id="left"><p>左列</p></div>
    <div id="right"><p>右列</p></div>
</div>

現在加CSS，要實現的效果是mian是可變的，right層寬度為200px，並且固定不變，要讓left的寬度隨main的變化而變化。CSS的寫法是：
#main{width:100%;background:#CCCCCC;}
#left{width:100%;margin-left:-200px;float:left;background:red;}
#right{width:200px;float:right;background:green;}

基本上達到所要的效果了，#left的寬度設定為100%，加個margin-left:-200px;讓它向左移動200px，好讓它騰出200px的空間塞進right層。但有一個問題，左列被移動的那200px隱藏了，看不到裡面的東西，所以還必須增加一個DIV來輔助。

修改了一下，HTML代碼，變成：
<div id="main">
    <div id="left">
        <div id="innerLeft"><p>左列</p></div>
    </div>
    <div id="right"><p>右列</p></div>
</div>

現在要讓innerLeft把左邊被隱藏的部分弄出來，所以得再加個margin-left:200px，修改後的CSS代碼如下：
#main{width:500px;background:#CCCCCC;}
#left{width:100%;margin-left:-200px;float:left;background:red;}
#innerLeft{margin-left:200px;}
#right{width:200px;float:right;background:green;}