Hermano, esta algo compleja la forma en que has organizado la estructura. La forma en que yo manejo este tipo de estructuras, es a traves de la anidación de divs.
Crea un Div principal o contenedor donde mida el ancho que tu le asignes a tu pagina.
Dentro de este div principal basate nada mas en dos bloques(divs). Uno a la izquierda y otro a la derecha. Para esto, los declaras como flotantes(
).
Es decir, anidas estos dos bloques(derecho e izquierdo) dentro del div principal. Y si te fijas, aqui tu podrás hacer el div izquierdoo mas largo que el derecho(tu cuadro de color rosa) dependiendo las medidas que tu le quieras manejar.
Y ahora viene la parte interesante. Simplemente para crear las demas divisiones en tu cuadro izquierdo creas un par de divs, el de arriba(color azul) y el de abajo. En el de abajo creas nuevamente otro div donde anidarás un par de divs flotados en right(verde) y left(amarillo).
Simplemente es entender la estructura de anidación entre divs. Espero me hayas entendido, de todos modos cualquier duda me la haces saber para orientarte.
A modo de consejo te recomiendo que en el div principal, y en los divs donde venga cualquier contenido donde el este pueda variar de tamaño, utiliza
en vez de height 100%. El overflow hace que se estire el contenido del div si es que este llega a ser algo amplio. Y por consiguiente estira los demas divs.