Problema CSS redimensionar pagina

jetemias · #1 (**permalink**) 16/11/2012, 10:14

Hola a todos:

Antes de nada decir que ya he buscado por las FAQs CSS y no he encontrada nada al igual que por la Web.

Estoy en construcción de mi primera Web programando el CSS yo solo, antes utilizaba plantillas ya creadas.

Mi problema es que al incluir texto o cualquier otra contenido en un div (el div es contenido), este no se agranda, es decir, cuando el texto (contenido) sobrepasa el div dicho div mantiene su height y el texto sigue fuera.

¿Cómo podría solucionarlo?

Código HTML:

Ver original<body>
    <div id="page">
        <div id="cabecera"></div>
        <div id="contenedor">
            <div id="contenido">
                Si meto mucho contenido aqu&iacute; el div no se me agranda
            </div>
            <div id="colgadoDerecha"></div>
        </div>      
        <div id="footer"></div>
    </div>
</body>

Código CSS:

Ver original#page {
    position: absolute;
    height: 90%;
    width:  60%;
    
    top:     5%;
    left:   20%;
    right:  20%;
    bottom:  5%;
}
 
#cabecera {
    position: absolute;
    height:  25%;
    width:  100%;
    
    top:     0%;
    left:    0%;
    right:   0%;  
}
 
#contenedor {
    position: absolute;
    height:  65%;
    width:  100%;
    
    top:     25%;
    bottom:  10%;
    left:    0%;
    right:   0%;
}
 
#contenido {
    position: absolute;
    height:  100%;
    width:    80%;
    
    top:     0%;
    bottom:  0%;
    left:    0%;
    right:   0%;
}
 
#colgadoDerecha {
    position: absolute;
    height:  100%;
    width:    20%;
    
    top:       0%;
    bottom:   0%;
    left:     80%;
    right:    20%;
}
 
#footer {
    position: absolute;
    height:  10%;
    width:  100%;
    
    bottom:  0%;
    left:    0%;
    right:   0%;
    
    background-color: green;  
}

pzin · #2 (**permalink**) 16/11/2012, 10:25

Si es tu primera web haciendo todo el CSS, te cogemos a tiempo.

Si especificas una altura con height, es normal que tal y cual elemento no siga creciendo, ya que se lo impide esa regla.

Lo de cogerte a tiempo, es en referencia al uso indiscriminado del posicionamiento absoluto. Se usa para cosas muy muy concretas, no para maquetear toda la estructura. Intenta cambiar el planteamiento que tienes.

jetemias · #3 (**permalink**) 16/11/2012, 10:29

Cita:

Iniciado por Bonez

Si es tu primera web haciendo todo el CSS, te cogemos a tiempo.

Si especificas una altura con height, es normal que tal y cual elemento no siga creciendo, ya que se lo impide esa regla.

Lo de cogerte a tiempo, es en referencia al uso indiscriminado del posicionamiento absoluto. Se usa para cosas muy muy concretas, no para maquetear toda la estructura. Intenta cambiar el planteamiento que tienes.

Ok, pues me toca modificar todos los height y cambiar algún % por pt.

Gracias por la ayuda, lo modifico y os comento.

Saludos

EDIT:
Vaya, estoy muy perdido, no se que tengo que hacer, he borrado todos los height menos el de page y no se como continuar, ¿me podríais dar alguna pista?

EDIT2:
He dejado algunos height que creo que no son necesarios editar como el de la cabecera o el footer. ¿He hecho bien?

Sherly · #4 (**permalink**) 05/12/2012, 17:26

Aquí te va la respuesta
Pero antes que nada tienes que saber que como dice nuestro compañero es malo abusar del absolute por la simple razon que al redimencionar la pantalla se te va a mover todo si no lo hiciste correctamente ok

Primero el contenedor principal debes de ponerle margen automático, aqui evitar poner los margenes izq y derechos.
Segundo el contenido lo pones en float a la izquierda y ya no es necesario que pongas margenes solo el ancho, el alto tampoco es necesario a menos que necesites especificarlo o simple lo pones al 100%, el contenedor derecha lo pones el float derecha y listo ya tienes todo lo necesario

Ahora surgirá el problema que el contenedor principal no se agrandara entonces pones body, y html altura al 100% al igual que el contenedor, y si eso no funciona pues lo forzamos agregando el div clear al final del contenedor con la propiedad clear: both; y listo ya lo tienes.

Por otro lado si te surge la necesidad de que tu pie este pegado al fondo solo quita los padding y los margenes.

un saludo y sigue practicando que así se logra aprender

Código PHP:

Ver original<style>
#page {
    height: 90%;
    width: 60%;
    top: 5%;
    bottom: 5%;
    margin: auto;
}
 
#cabecera {
    /* [disabled]position: absolute; */
    height: 25%;
    width: 100%;
    top: 0%;
    left: 0%;
    right: 0%;
}
 
#contenedor {
    width: 100%;
    top: 25%;
    bottom: 10%;
    margin: auto;
    height: 100%;
}
 
#contenido {
    height: 100%;
    width: 80%;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    float: left;
}
 
#colgadoDerecha {
    width: 20%;
    float: right;
}
 
#footer {
    background-color: #090;
}
.clear{
    clear: both;}
</style>
</head>
 
 
<body>
    <div id="page">
        <div id="cabecera">
          <p>head</p>
          <p>&nbsp;</p>
        </div>
        <div id="contenedor">
            <div id="contenido">
                <p>Si meto mucho contenido aqu&iacute; el div no se me agranda
                </p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
            </div>
            <div id="colgadoDerecha">
              <p>derecha</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
            </div>
        <div class="clear"><!--Sirve para corregir el atributo al usar float en conclución te hace grande el div contenedor dependiendo del contenido--></div>
        </div>
              
          <div id="footer">Pie</div>  
</div>
</body>