Haz que un div en línea bloquee el 100% del ancho restante

Tengo 3 bloques div dentro de otro div .

Lo que quería hacer era ponerlos en línea, pero los primeros 2 bloques div deberían tener un ancho según su contenido y el último div tomar el espacio restante.

 
Red
Green
Blue

Intento evitar el uso de anchuras fijas porque necesito usar esto en un diseño receptivo.

¿Cómo puedo hacer que el div azul en este violín tome el rest del espacio disponible de su padre y actúe como respuesta si la pantalla cambia de tamaño?

Creo que si no quiere especificar ningún ancho de píxel o porcentaje y hacer que los contenedores rojo y verde sean tan anchos como su contenido, deberá envolverlos dentro de su propio contenedor, denominado .left continuación:

 
Red
green
blue

Si ahora .left a la izquierda y también .left div a la izquierda, ya no necesitas especificar ningún elemento de bloque en línea. El contenedor azul simplemente ocupará tanto espacio como tenga disponible hasta el final del .container .

 .left { float: left; } .left div { float: left; } 

Violín

Editar

Tonto, el contenedor .left obviamente no es necesario siempre y cuando simplemente agregues float: left en tus bloques rojo y verde, tal como dijo @Ennui arriba en los comentarios 🙂

Fiddle actualizado

float: left el rojo y el verde y el azul obtener width: clac(100% - 100px)

 .blue { width: calc(100% - 100px); } 

http://jsfiddle.net/6kLVn/190/

Cambia tu CSS a esto:

 .container{border: 2px solid black; padding: 5px; position: relative; width: 100%;} .container div {height: 20px;} .red{border: 2px solid red; display: block; float: left;} .green{border: 2px solid green; display: block; float: left;} .blue{border: 2px solid blue;} 

Probado en Chrome

EDITAR

Tonto, este es el jsfiddle bifurcado: http://jsfiddle.net/BWRVk/

Supongo que todo se basa en lo que quieres que sean tus imágenes. Acabo de usar% en las imágenes para mostrar que se pueden cambiar de tamaño de acuerdo con un diseño receptivo. http://jsfiddle.net/6kLVn/7/

HTML

 
Red
green
blue

CSS

 .container{border: 2px solid black; padding: 5px; position: relative; margin:0px; width: 100%;} .container div {height: 20px; display: inline-block; padding:0px; margin:0px;} .red{border: 2px solid red; width:31%; } .green{border: 2px solid green;width:31%;} .blue{border: 2px solid blue;width:31%;} 

Si quieres que responda, da los divs % widths .

http://jsfiddle.net/feitla/6kLVn/6/

 .container div {height: 20px;} .red{border: 2px solid red;width:10%;display:inline;} .green{border: 2px solid green;width:10%; display: inline;} .blue{border: 2px solid blue;display:inline-block;width:80%;}