Tengo un div que contiene dos divs secundarios y están diseñados para ser parte de un diseño fluido, por lo que no puedo establecer un tamaño fijo para ellos en px.

Hay dos objetivos aquí:

Alinee los dos divs secundarios horizontalmente, lo que he logrado usandofloat: left yfloat: right respectivamente.

Centra verticalmente el texto (dentro de los divs secundarios) en relación con el div principal. El texto es corto y toma una sola línea por diseño.

Lo que tengo ahora:http://jsfiddle.net/yX3p9/

Aparentemente, los dos divs secundarios no toman la altura completa del div principal y, por lo tanto, su texto no está centrado verticalmente en relación con el div principal.

Conceptualmente, para lograr los objetivos anteriores, podemos hacer que los divs secundarios estén centrados verticalmente dentro del div principal, o podemos hacer que los divs secundarios tomen la altura completa del div principal. ¿Cuál es la forma robusta de hacerlo?

* Soporte de navegador: IE 9+ y otros navegadores modernos habituales.