左列固定和右列流体的CSS布局？

Question

对于固定和流畅的CSS列，是否有可靠的跨浏览器解决方案？我需要在左侧固定一个柱子，在右侧固定另一个柱子。

以下是我的代码片段 - .promoImg和.promoContent并排浮动。 #recommends占浏览器宽度的90％，.promoImg需要修复为120px，我希望.promoContent能够拉伸流畅。

<div class="promoBlock ">
    <div class="promoImg">
        fixed content 300px
    </div>
    <div class="promoContent">
        fluid content
    </div>   
</div>

Answer 1

.promoBlock { width:90%; margin:auto; } 
.promoImg { width:300px; float:left; background-color:red; }
.promoContent { margin-left:300px; background-color:green; }

代码：http://jsfiddle.net/P4RBj/

P.S：没有 promoblock需要修复120px 。如果是这样，你的内部div更宽（300px）。