En realidad en la consulta inicial teniendo dentro del contenedor-grande:
1- contenedor
2-caja roja
La roja va primero porque si pones primero la "contenedor" al no tener un ancho definido ocupa todo el ancho de la caja padre (contenedor-grande) y luego la roja, evidentemente, quedaría debajo y no al lado tal como querías.
Lo mismo ocurre entre la caja gris y la verde.
Prueba a cambiar de posicion en el html y verás lo que digo.
No entendí lo que decias de que si el rojo tenia contenido el gris se desplaza o algo así
Te muestro unas capturas:
Con contenido en el rojo y mucho contenido en el gris
Sin rojo:
PD: no había visto las imagenes en tu post, pero me da la impresión que algo no está tal como te lo pasé, algo haz cambiado.
Puedes quitarle el width a la caja azul y tal vez aplicarle un float:left; a ver que resulta