左右两栏布局，左栏固定宽度，右栏自适应宽度

• 2009-04-19
• 2347 View

做一个项目，需要左右两栏，左栏固定宽度，右栏自适应宽度。
如果是左右都是百分比那就好说了，右栏定宽也好办，现在这个要求是个难题。
从网上找了半天没结果，只好自己想了个比较笨的办法：

左栏浮动，其余的空间放到一个层里留给右栏，倒也解决了这个问题，IE6/7，FF2测试通过。

<div id="main" style="width:100%;background-color:#FFFFCC;min-width:300px;float:left">
    <div id="left" style="width:120px;background-color:#FFFFCC;float:left">这里是左栏<br /><br /><br /></div>
    <div style="margin-left:120px;background-color:#0099FF" >
        <div style=" width:100%; float:left; background-color:#CCCCFF">这是右栏<br /><br /><br /><br /><br /><br /></div>
    </div>
</div>

右边用了两个层，如果只用一个，在IE6下后有一点小问题，受左栏内容的影响，再套上一个层就解决了。