¿Cómo puedo alinear verticalmente dos divs flotados?

Tengo dos divs dentro de un contenedor div. Uno necesita flotar a la izquierda el otro flotar a la derecha. Ambos también necesitan estar centrados verticalmente dentro de sus padres. ¿Cómo puedo conseguir esto?

Some text
Details

Si no se aplica ningún flotante, se alinean verticalmente en el medio con este css

 .child{ display:inline-block; vertical-align:middle; } 

Sin embargo agregando #right-box{ float: right; } #right-box{ float: right; } hace que los niños pierdan su alineación vertical. ¿Qué estoy haciendo mal?

Gracias chicos

Aquí está la demostración en línea de la solución que necesitaba

introduzca la descripción de la imagen aquí

fue hecho con este html:

 
Some text
Details

y este css:

 #parent { position: relative; /* decoration */ width: 500px; height: 200px; background-color: #ddd; } .child { position: absolute; top: 50%; height: 70px; /* if text is one-line, line-height equal to height set text to the middle */ line-height: 70px; /* margin-top is negative 1/2 of height */ margin-top: -35px; /* decoration */ width: 200px; text-align: center; background-color: #dfd; }​ #left-box { left: 0; } #right-box { right: 0; } 

Puede probar la visualización: tabla y visualización: estilos de celda de tabla.
Visite este sitio para obtener más detalles http://www.quirksmode.org/css/display.html

NB: si desea que la altura div del padre sea un porcentaje (como 100%), será relativa a la altura de su contenedor. Si el contenedor es el cuerpo, también tendrá que establecer la altura del cuerpo y del html, como al 100%.

Aquí hay un ejemplo de cómo podría verse el código:

 
Some text
Details