dos divs uno al lado del otro, uno ancho del 100% otros depende del contenido

Question

Quiero colocar dos etiquetas DIV una al lado de la otra sin usar ancho fijo. El primer div se expande a su contenido y el segundo div debe llenar el espacio restante. Además, los div no se deben sentar encima del otro div, porque tienen una imagen de fondo transparente, por lo que si se cruzan es evidente. Intenté todas las posibilidades que podía pensar pero no pude encontrar una solución usando etiquetas DIV.

Puedo hacer esto usando una TABLA, pero ¿es posible hacerlo usando DIV? ¿O es esto una cosa más que DIV no puede hacer?

Aquí está el código:

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

Gracias por las respuestas!

Answer 1

Ver:http://jsfiddle.net/kGpdM/

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

Esto funciona en todos los navegadores modernos y IE7 +.

La columna de la izquierda será exactamente igual de ancha que el contenido que contiene. La columna de la derecha ocupará el espacio restante.

El overflow: hidden "truco" detrás de esta respuesta es explained here.