Ver Mensaje Individual
  #1 (permalink)  
Antiguo 31/05/2011, 10:30
Avatar de Ventru3
Ventru3
 
Fecha de Ingreso: noviembre-2010
Ubicación: Disneylandia
Mensajes: 86
Antigüedad: 13 años, 4 meses
Puntos: 13
Mensaje Posicionar footer

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  4.  
  5. </head>
  6.  
  7.  
  8. <div id="all-wrapper">
  9.    
  10.     <div id="header"></div>
  11.  
  12.     <div id="main-wrapper">
  13.         <div id="content">
  14.             <div id="text">
  15.                 Aqui va el texto de la web
  16.             </div>
  17.         </div>
  18.     </div>
  19.  
  20.     <div id="push"></div>
  21.  
  22. </div> 
  23.  
  24. <div id="footer"></div>
  25.  
  26. </body>
  27.  
  28. </html>

Y el CSS

Código CSS:
Ver original
  1. html, body {
  2.     margin: 0;
  3.     padding: 0;
  4.     height: 100&#37;;
  5.     background-color: #e5e5e5;
  6.     font-family: Georgia, Arial, serif;
  7.     font-size: 12px;
  8.     color: #252525;
  9. }
  10.  
  11. #all-wrapper {
  12.     border: 1px solid;
  13.     min-height: 100%;
  14.     height: auto !important;
  15.     height: 100%;
  16.     margin-bottom: -40px;
  17. }
  18.  
  19. #header {
  20.     background: url(images/header.png) repeat-x;
  21.     width: 100%;
  22.     height: 220px;
  23.     padding-bottom: 100px;
  24. }
  25.  
  26. #main-wrapper {
  27.     margin: 0px auto;
  28.     padding-bottom: 80px;
  29.     width: 768px;
  30. }
  31.  
  32. #content {
  33.     background: url(images/content-box.png) no-repeat;
  34.     width: 768px;
  35.     height: 441px;
  36. }
  37.  
  38. #text {
  39.     width: 600px;
  40.     padding-top: 150px;
  41.     padding-right: 90px;
  42.     padding-left: 90px;
  43. }
  44.  
  45. #push {
  46.     height: 40px;
  47.     clear: both;
  48. }
  49.  
  50. #footer {
  51.     height: 40px;
  52.     text-align: center;
  53.     clear: both;
  54. }

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.

Última edición por Ventru3; 31/05/2011 a las 10:42