Dos capas dentro de una capa con DIV y CSS

[cereal]

Buenas, tengo un pequeñito problema de diseño, que no consigo arreglar....utilizando el navegador chrome.

Tengo una capa madre (cuadro), y dos capas hijas (cuadro_dia y cuadro_horas).
Entonces mi intención es meter esas dos capas hijas dentro de la capa madre, así tienen la posición relativa.

El código es lo siguiente:

Código:

<div class='cuadro'>
          <div class='cuadro_horas'>M:</div>
          <div class='cuadro_dia'>12</div>
</div>

Y la hoja de estilos está definido así:

Código:

.cuadro {
    height: 50px;
    width: 90px;
    border: double;
}

.cuadro_horas {
    height: 50px;
    width: 60px;
    position: relative;
    background-color: yellow;
    color: red;
    text-align: left;
    font: 8pt Verdana;
}

.cuadro_dia {
    height: 50px;
    width: 20px;
    left: 70px;
    top: 0px;
    position: relative;
    background-color: green;
    color: red;
    text-align: right;
    font: 8pt Verdana;
}

El resultado que obtengo es:



Loque quiero es que los dos recuadros hijas (amarillo y verde) estén dentro. ¿Por qué el verde está fuera, estando dentro del <DIV> de la madre?

Gracias de antemano!!