title: two divs side by side, one 100% width others width depended on content
body: <p>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. </p>
  
  <p>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?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>            #right{
                background: green;     
                width: 100%;
              }
              #left {
                margin-top: 5px; /* to test if they intersect*/
                background: red;
              }  
              #container {
                 width: 800px;
              }
              &lt;div id="container"&gt;
                 &lt;div id="left"&gt; This div is as big as it's content&lt;/div&gt;
                 &lt;div id="right"&gt; rest of space&lt;/div&gt;
              &lt;/div&gt; 
  </code></pre>
  
  <p>Thanks for the replies!</p>