并排两个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

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

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

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