css - two divs side by side, one 100% width others width depended on content

Question

I want to place two DIV tags side by side without using fixed width. The first div expands to its content and the second div should fill the remaining space. Also the div must NOT sit on top of the other div, because they have a transparent background image so if they intersect it's noticeable. I tried all possibilities that i could think off but couldn't find a solution using DIV tags.

I can do this using a TABLE, but is it possible to do it using DIV's? Or is this one more thing DIV's can't do?

Here's the code:

            #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> 

Thanks for the replies!

Answer 1

See: http://jsfiddle.net/kGpdM/

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

This works in all modern browsers and IE7+.

The left column will be exactly as wide as the content inside it. The right column will take the remaining space.

The overflow: hidden "trick" behind this answer is explained here.