Organizando mejor los div y la hoja de estilos no hace falta agregar un nuevo contenedor.
Solo hay que considerar el orden en que van apareciendo las cajas.
Dentro del contenedor-grande:
1º La caja roja que estará flotada a la derecha y que tiene un ancho fijo.
2º La caja contenedora, que no tendrá flotado, pero sí un margen derecho igual a la caja roja.
La roja debe ir primero porque la otra no tiene un ancho definido.(*)
Ya dentro de la caja contenedora:
1º La caja Azul que como ocupa todo el ancho de la caja padre no es necesario que este flotada.
2º La caja verde flotada a la derecha con ancho fijo, de manera que la caja siguiente se ubique en el espacio que queda a su izquierda.
3º La caja gris que se posicionara a la izquierda de Verde.
La verde debe ir primero porque la otra no tiene un ancho definido. (idem que *)
Código HTML:
Ver original
<div class="contenedor-grande">
hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola holaholaholahola
Código CSS:
Ver original*{ padding:0; margin:0;}
.contenedor-grande{
position: relative;
width:100%;
}
.contenedor {
position:relative;
margin-right:210px;
}
.azul {
background-color:#00F;
float: left;
width:100%;
}
.gris {
width:auto;
background-color: #CCC;
}
.verde {
width:315px;
float:right;
overflow:hidden;
background-color: #6C6;
}
.rojo {
width:210px;
overflow:hidden;
float:right;
background-color: #C03;
}