两个div并排，一个100％宽度其他宽度取决于内容

Question

我想在不使用固定宽度的情况下并排放置两个DIV标签。 第一个div扩展到其内容，第二个div应填充剩余空间。 div也不能坐在另一个div的顶部，因为它们有一个透明的背景图像，所以如果它们相交就很明显了。我尝试了所有可能的想法，但是找不到使用DIV标签的解决方案。

我可以使用TABLE执行此操作，但可以使用DIV执行此操作吗？或者这是DIV不能做的另一件事吗？

以下是代码：

            #right{
              background: green;     
              width: 100%;
            }
            #left {
              margin-top: 5px; /* to test if they intersect*/
              background: red;
            }  
            #container {
               width: 800px;
            }
            <div id="container">
               <div id="left"> This div is as big as it's content</div>
               <div id="right"> rest of space</div>
            </div> 

感谢您的回复！

Answer 1

请参阅： http://jsfiddle.net/kGpdM/

#left {
    background: #aaa;
    float: left
}
#right {
    background: cyan;
    overflow: hidden
}

这适用于所有现代浏览器和IE7 +。

左列与其中的内容完全一样宽。右栏将占用剩余空间。

此答案背后的overflow: hidden“技巧”是explained here。