Posicionamiento del Footer

[oNefl0w189]

Hola amigos,
una vez más vengo con un problemilla de maquetación.

El caso es que quiero que mi footer aparezca siempre abajo de la página y lo consigo si le pongo posiciones absolutas, pero necesito hacerlo con un position relative y no hay manera...

Si me podéis echar un cable..!

actualmente lo tengo así;

Código:

		<!-- Contenido -->	
		<div class="contenido" id="curved">
		asdasdasdasasdasdasdasdasasdasd 
		</div>
		
		
		<!-- Pie de página -->
		<div class="pie">
			<img src="imagenes/hospital.gif" width="100" height="80"/>
			<img src="imagenes/jcyl.png" width="100" height="80"/>
			<img src="imagenes/sacyl.gif" width="100" height="80"/>
		</div>

Código:

/* CSS - Contenido */
div.contenido {
	width: 50%;
	margin: 65px 0 0 410px;
	padding: 15px 30px 15px 30px;
}

/* CSS - Pie de Página */
div.pie {
    position: relative;
	margin: 30px 10px 0 10px;
    bottom: 0px;
	float: left;
}

div.pie img {
	margin-right: 50px;
}

[IXtremeLT]

Si ese es un tema muy comun y problematico mira yo ya lo he hecho funcionar hasta en ie8, solo ocupas un par de lineas de css y hasta con position relative, pero como ahorita no ando en mi pc no puedo decirte exactamente como le hice, mas tarde te digo, pero si mas recuerdo primero ocupas encerrar todo en un div que es como un sub-body a este le pones position relative height 100% asi como a la etiqueta html y body, luego al footer le das position absolute o pruebale con relative y le pones bottom:0 y a la capa .contenido le das un margin-bottom del height que tenga el footer en caso de usar absolute.

O bien checate este maquetado http://www.angelfcm.my-place.us/guarderia_SuperBaby/ que hice aplicando esa tecnica, es sencillo el codigo para que veas como pongo el footer, saludos!

[oNefl0w189]

Ya conseguí posicionarlo donde quería, pero ahora tengo otro problema.

Como dicen, una imagen vale más que mil palabras, aquí tienen:

aqui sale bien:



Pero cuando redimensionan la página se descolocan los elementos:



se descolocan y se ponen donde quieren..


Lo que yo quiero es que salga el scroll, pero que no se muevan las imagenes de sitio, que queden donde estan como estan.


Un saludo y gracias!!

[IXtremeLT]

Muy sencillo, dale un ancho que no sea en porcentajes al footer, saludos.

[oNefl0w189]

Iniciado por IXtremeLT

Muy sencillo, dale un ancho que no sea en porcentajes al footer, saludos.

Muy bien, es cierto, ahora ese problema se ha arreglado, pero el caso es que si redimensiono hacia arriba los iconos se suben y se meten dentro del div de contenido tambien.

Supongo que de la misma manera, esto se arreglará dandole un height al div, pero el problema es que ese Height no lo sé, puesto que el div en principio no está y al pulsar en un enlace aparece un div de 'x' tamaño, al pulsar en otro enlace aparece otro div distinto de 'x' tamaño o al pulsar en otro enlace desaparecen los divs.


Como podría hacer esto??


Muchisimas gracias!

[IXtremeLT]

Al elemento queda arriba del footer dale un margin-bottom del height que tenga el footer o bien prueba darle un margin-top al footer del tamaño de su height.

[Heiroon]

Chamo implementale esto... http://ryanfait.com/sticky-footer/

[IXtremeLT]

Excelente truco @Heiroon!, aunque nunca he etendido por que hacer algo como esto:

Código CSS:

.foo {
    height: auto !important;
    height: 100%;
}
 

No tiene sentido que se le vuelva a dar otro valor a la misma propiedad que se le dio un valor declarado como !important ya que logicamente va a tomar en cuenta el height: auto y no el height: 100% en este caso.
De hecho si al ejemplo que enlazaste le quitas el height:100%, funciona igual no hay ninguna diferencia. ¿Alguien me puede explicar? Saludos!

[kseso?]

Iniciado por IXtremeLT

¿Alguien me puede explicar? Saludos!

Cosas del pasado.
¿Oyó hablar de ie6? No entendía el !important y también tenía sus cosas al interpretar lo del height: auto|100%

[IXtremeLT]

No te entendi o.O