tamañol de la caja adaptable con el contenido

[cereal]

Buenas compañeros,

En esta página:

[URL="http://planning.comeze.com/index.php"]http://planning.comeze.com/index.php[/URL]

Al seleccionar mes y año y aceptar, aparece los días dentro de un contenedor general, pero, no se adapta el tamaño del contenedor general con el contenido.

Ahora mismo está así el contenedor:

Código PHP:

  .cuadro_general {
    height: 350px;
    width: auto;
    position: relative;
    background-color:#666680;
    color:white;
    border:dotted;
    border-radius: 10px; 
} 
   

Tengo como "height: 350px;" porque quiero que aparezca el contenedor, pero si pongo como 'auto' entonces no se ve nada, como si no le importara que hay dentro.

Así que.... ¿habrá que hacer un nuevo <div> con tamaño variable o algo similar? ya no se el truco de que el contenedor se 'adapte' según el contenido.

Gracias!

[alexg88]

El problema es que utilizas posicionamiento absoluto, por tanto, es normal que el div no se adapte al contenido, porque cuando posicionas de manera absoluta los elementos salen del elemento padre.

Luego, la primera fila usas float y ahí podría solucionarse facilmente usando la propiedad overflow:auto en el div contenedor, pero solo cubriría hasta los elementos que están flotantes (los que están posicionados de manera absoluta no). El problema que tienes es que mueves los elementos flotantes hacia abajo, y por tanto, tampoco te cubriría del todo el div contenedor.

Tienes que buscar otra forma de hacerlo o ponerle un tamaño al div contenedor que sea tan grande como lo que ocupa el calendario.

[cereal]

Bueno, de hecho, los elementos de dentro son de posición relativa respecto hacia dentro del contenedor y flotando, aquí dejo los elementos:

Código PHP:

  .cuadro_general {
    height: 300px;
    //height: auto;
    width: auto;
    position: relative;
    background-color:#666680;
    color:white;
    border:dotted;
    border-radius: 10px;
    //overflow:auto;
}
 
.cuadro_horas {
    height: 50px;
    width: 50px;
    position: relative;
    background-color: #9CA3D5;
    color: black;
    text-align: left;
    font: 8pt Verdana;
    float: left;
    border-radius: 5px 0px 0px 10px;
}
 
.cuadro_dia {
    height: 50px;
    width: 30px;
    position: relative;
    background-color: #7077A4;
    color: black;
    text-align: right;
    font: 15pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    //font: 15pt Verdana bold;
    float: right;
    border-radius: 0px 5px 10px 0px;
}
 
.clear {
    clear:both;
    font-size:0;
}
 
.boton{
    background:none repeat scroll 0 0 transparent;
    color:#000000;
    height:50px;
    position:absolute;
    width:80px;
    z-index:2;
    border: none;
}
 
.cuadro_dias_semana {
    height:50px;
    width:80px;
    top: 30px;
    position: relative;
    background-color: #7B89D3;
    color: black;
    font: 12pt Verdana;
    text-align: center;
    border: none;
    border-radius: 10px;
    float: left;    
}
 
#cuadro_lunes {
    left: 30px;
}
 
#cuadro_martes {
    left: 60px;
}
 
#cuadro_miercoles {
    left: 90px;
}
 
#cuadro_jueves {
    left: 120px;
}
 
#cuadro_viernes {
    left: 150px;
}
 
#cuadro_sabado {
    left: 180px;
}
 
#cuadro_domingo {
    left: 210px;
}
 
.cuadro_dia2{
    height:50px;
    width:80px;
    //left: 30px;
    top: 100px;
    position: absolute;
    background:none repeat scroll 0 0 transparent;
    color: black;
    font: 12pt Verdana;
    text-align: center;
    z-index:2;
    border-radius: 10px;
}
 
#cuadro_2_1{
    left: 30px;
}
 
#cuadro_2_2{
    left: 140px;
}
 
#cuadro_2_3{
    left: 250px;
}
 
#cuadro_2_4{
    left: 360px;
}
 
#cuadro_2_5{
    left: 470px;
}
 
#cuadro_2_6{
    left: 580px;
}
 
#cuadro_2_7{
    left: 690px;
}
 
#cuadro_3_1{
    left: 30px;
    top: 170px;
}
 
#cuadro_3_2{
    left: 140px;
    top: 170px;
}
 
#cuadro_3_3{
    left: 250px;
    top: 170px;
}
 
#cuadro_3_4{
    left: 360px;
    top: 170px;
}
 
#cuadro_3_5{
    left: 470px;
    top: 170px;
}
 
#cuadro_3_6{
    left: 580px;
    top: 170px;
}
 
#cuadro_3_7{
    left: 690px;
    top: 170px;
}
 
// ......etc....lo mismo hasta #cuadro_7_7 que es lo que completa todos los dias del mes entero.