Posicionar footer

Ventru3 · #1 (**permalink**) 31/05/2011, 10:30

Bueno ya llevo unos días intentando colocar el footer SIEMPRE abajo... y si, lo consigo hasta que el texto es mas grande. Ahí es cuando esta el problema, que el footer no es empujado ni la posición absoluta con el bottom: 0; me sirve de nada.

Os dejo la estructura HTML de la web.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
 
<head>
</head>
 
<body>
 
<div id="all-wrapper">
    
    <div id="header"></div>
 
    <div id="main-wrapper">
        <div id="content">
            <div id="text">
                Aqui va el texto de la web
            </div>
        </div>
    </div>
 
    <div id="push"></div>
 
</div>  
 
<div id="footer"></div>
 
</body>
 
</html>

Y el CSS

Código CSS:

Ver originalhtml, body {
    margin: 0;
    padding: 0;
    height: 100&#37;;
    background-color: #e5e5e5;
    font-family: Georgia, Arial, serif;
    font-size: 12px;
    color: #252525;
}
 
#all-wrapper {
    border: 1px solid;
    min-height: 100%;
    height: auto !important;
    height: 100%; 
    margin-bottom: -40px;
}
 
#header {
    background: url(images/header.png) repeat-x;
    width: 100%;
    height: 220px;
    padding-bottom: 100px;
}
 
#main-wrapper {
    margin: 0px auto;
    padding-bottom: 80px;
    width: 768px;
}
 
#content {
    background: url(images/content-box.png) no-repeat;
    width: 768px;
    height: 441px;
}
 
#text {
    width: 600px;
    padding-top: 150px;
    padding-right: 90px;
    padding-left: 90px;
}
 
#push {
    height: 40px;
    clear: both;
}
 
#footer {
    height: 40px;
    text-align: center;
    clear: both;
}

No entiendo porque el all-wrapper, que es el que contiene todo el contenido no crece con el texto con lo cual cuando el texto es demasiado grande el footer no queda posicionado abajo.

A ver si alguien sabe algo

PD: He buscado MUCHO en internet y en el foro así que agradecería que no hubieran mensajes de: busca bien o esto ya se a puesto muchas veces y bla bla bla.

Isra_84 · #2 (**permalink**) 31/05/2011, 11:36

Pon entre el footer y el resto del contenido un div con heigth de 1px y así siempre se irá hacia abajo

Ventru3 · #3 (**permalink**) 31/05/2011, 11:47

No, tampoco funciona.

No entiendo porque la caja no crece con el texto, parece que el texto estuviera por encima de todos los divs.

Suskos · #4 (**permalink**) 31/05/2011, 12:00

Hola Ventru3,
no sé si el ejemplo te servirá, espero que sí.
Hace años se publicó un artículo muy bueno sobre como hacer para que los footers se mantengan siempre abajo. Échale un vistazo:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Un saludo

ArturoGallegos · #5 (**permalink**) 31/05/2011, 12:05

pasa a revisar el código fuente de este aporte del compañero @Mikmoro -> clic aquí

Ventru3 · #6 (**permalink**) 31/05/2011, 12:16

El caso es que la estructura de las dos páginas que me habéis puesto las he probado (de hecho la del enlace de Ag666 es la misma que estoy utilizando) y no me sale bien, así que tendré que simplificar la estructura que tengo y una vez solucione el problema volver a reconstruir la estructura encima de la simple.

Esperare a que se me pase la mala ostia para volver a empezar porque no quiero quedarme sin ordenador.

PD: A ver si alguien me puede ayudar en base a la estructura que tengo

Isra_84 · #7 (**permalink**) 31/05/2011, 13:23

Ponle heigth:auto; al wall-wrapper y así se adaptará al contenido y empujará al footer siempre abajo.

Ventru3 · #8 (**permalink**) 31/05/2011, 13:38

Lo tiene (linea 14)

.
De hecho esta como importante para que prevalezca sobre los demás.

Ventru3 · #9 (**permalink**) 01/06/2011, 08:05

Bueno esta mañana con mas calma lo he empezado a hacer desde cero. Primero he hecho la estructura simple para ver que me funcionaba y después le he ido añadiendo lo demás. Al parecer el problema estaba en asignarle a #content un tamaño definido.

Gracias a todo por la ayuda

IsaBelM · #10 (**permalink**) 01/06/2011, 08:37

Cita:

Iniciado por Ventru3

Bueno esta mañana con mas calma lo he empezado a hacer desde cero. Primero he hecho la estructura simple para ver que me funcionaba y después le he ido añadiendo lo demás. Al parecer el problema estaba en asignarle a #content un tamaño definido.

Gracias a todo por la ayuda

si te funciona, bien. pero es extraño lo que comentas. acabo de probarlo y funciona. está basado en este otro

si no programas para ie6 no te es necesario height: auto !important; así que puedes dejarlo así

Cita:

min-height: 100%;
height: auto;

Ventru3 · #11 (**permalink**) 01/06/2011, 08:47

Si, con el código del primer post el footer va perfecto mientras el texto no crezca mas de lo que ocupa el/la div/caja. Mientras esto no sucede puedes hacer zoom arriba y abajo que el footer siempre estará abajo. Pero cuando el texto excede la altura definida en el div content es cuando el footer se comporta de forma rara y no se queda abajo.

No acabo de entender muy bien aun el porque.

Con el content definido

Sin definir