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

是否有针对固定和流畅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>

解决方法

.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).