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!!

[jomaruro]

Hola:

Cambia cuadro_horas y cuadro_dias así:

Código CSS:

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

Interpreto que si pones left:70px es porque lo quieres más bien hacia la derecha, por eso lo he flotado a la derecha, si no es así puedes probar a cambiar la posición con margin o con padding.

Saludos.

[cereal]

¡Gracias ! Con eso se me ha resuelto, gracias al float, no me acordaba de esta propiedad. Justo lo necesitaba.

Pero con eso, o sea, en total tiene 3 div's (recuadro grande y dos pequeñas), y quiero que todo eso se convierta en un botón <input> y no queda nada bien.

He intentado con <a href....> queda bien estéticamente, pero no me funciona, porque no puedo enviar los datos del POST como lo haría con <input>, así que...

¿Cómo puedo que el contenedor general (la madre, que incluye 2 contenedores mas dentro), pueda convertirse en un botón con <input> sin que se desencuadre?

Gracias!!