footer siempre al final del la pagina

[juan_14nob]

Hola a todos, tengo un problema el cual es que no se como hacer con un div para que se ubique siempre abajo.. quiero que el footer quede siempre al final dela pagina pero sin usar tablas.. ya que si pongo poco contenido en el cuerpo el div se ubiqueria arriba y no al final como yo quiero.. saludos.

[raherlo]

Para hacer eso le puedes indicar en el div del pie, el margin-top = el alto que quieres que tenga tu página. Y de esa manera se te quedará siempre abajo, independientemente del contenido que tenga la página.
Saludos...

[laratik]

Pues yo nunca he tenido problemas para que un div se quede abajo, si estas utilizando la propiedad float dentro de los divs, debes especificarle al div footer la propiedad clear: both, de resto no le veo mayor problema para que no quede abajo. Seria de utilidad saber como estas manejando los elementos dentro de la pagina y asi saber por que se comporta de tal manera.

Veo que hoy se me están adelantando . ¿Y si el contenido es mayor que el margin-top que se le da? no cero que sea una buena solución, a no ser que la pagina vaya a tener contenido estático.

[raherlo]

laratik tiene razón, es que recién acabo de estrenarme con mi primera web estática, y lo conseguí así.
Pero si es dinámica no sirve, comprendo, pero con el clear:both, consigues que se ponga debajo del contenido o tamaño que tenga el último div, pero no debajo del todo, si este no abarca todo.

Saludos

[juan_14nob]

aqui les dejo el codigo..

[CSS]
<style type="text/css">
#fyh{
position:absolute;
margin: 0 10px 0 0;
height:auto;
top:0px;
right:0px;
font-family:martina;

margin-top:80px;


}

#cerrar{
width:100px;
height:20px;
position:relative;
float:right;
}
#cerrar a{
font-family:martina;
color:white;
}
#cerrar a:hover{
color:white;

}
#header{
width:100%;
height:100px;
background-image: url('css/photo/head2.jpg');
position:relative;

}
#footer{
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
margin:auto;
width:800px;
text-align: center;
background-image: url('css/photo/footer1.jpg');
color: #fff;
height: 2em;
margin-top: 10px;
position:relative;

}
* {
margin: 0;
outline: 0 none;
}
#contenido{
width:100%;
height:auto;
position:relative;

margin-top:0px;
}
html{
height: 100%;
outline: 0 none;
background:white;
color:black;

}
.corte{
clear: both;
padding-top:2em;
position:relative;

}
#contenedor{
min-height:100%;
width:1000px;
//height:auto;
margin: 0 auto;


}
.mensaje-no-leido{
background: url('icon-16-messages.png') no-repeat scroll 3px 3px transparent;
padding: 4px 10px 0 22px;
font-family: Arial,Helvetica,sans-serif;
color:black;
font-size:10px;

}
#caja-menu{
background: none repeat scroll 0 0 #f0f0f0;
border: 1px solid #CCCCCC;
height:26px;

}
#derecha{
float:right;
}
#caja-menu .logout{
background: url('icon-16-logout.png') no-repeat 3px 3px transparent;

}
#caja-menu span{
display:block;
float:left;
line-height:16px;
margin-bottom:5px;
padding: 4px 10px 0 22px;
font-size:11px;
}
a:visited{
color:#0B55C4;
text-decoration:none;
}
a:hover{
text-decoration:underline;

}
.logout{

}



table.adminlist tbody tr td {
// background: none repeat scroll 0 0 ;
border: 1px solid #FFFFFF;
height: 25px;
}
.row1{
background-color: #F9F9F9;
font-size:11px;
font-weight:bold;
margin-left:6px;
border:none;
}
.row0{
background-color: #EEEEEE;
font-size:11px;
font-weight:bold;
margin-left:6px;
border:none;
}
.pregunta{
margin-left:6px;

}
table.adminlist .pagination {
display: table;
margin: 0 auto;
padding: 0;
}
.pagination div.limit {
font-size:11px;
float: left;
height: 22px;
line-height: 22px;
margin: 0 10px;
}
input, select {
border: 1px solid silver;
font-size: 10px;
}
table.adminlist thead th {
background: none repeat scroll 0 0 #F0F0F0;
border-bottom: 1px solid #999999;
border-left: 1px solid #FFFFFF;
color: #666666;
text-align: center;
}
.container {
text-decoration: none;
}
table.adminlist {
background-color: #E7E7E7;
border-spacing: 1px;
color: #666666;
width: 30%;
margin-top:20px;
}
.title{



}
body {
font-family: Arial,Helvetica,sans-serif;
font-size:11px:
}
a{
color: #0B55C4;
text-decoration: none;
font-size:11px;
font-weight:bold;
}
#divtapa{
position:fixed;
width:190px;
height:100px;
z-index:999;
background-color:#FFFFFF;
display:none;

}
#mostrame{
position:relative;
width:190px;
height:100px;
display:none;
width:200px;

height:100px;
}
.imgs{
border:none;

}


</style>
[/CSS]

Código HTML:

<html>
<head>
<title>Principal-Admin</title>

<script type="text/javascript" src="jquery-1.5.js"></script>

<script language="JavaScript" type="text/javascript">
	


function confirmation() {
	var answer = confirm("Leave tizag.com?")
	if (answer){
		alert("Bye bye!")
		window.location = "http://www.google.com/";
	}
	else{
		alert("Thanks for sticking around!")
	}
}


$(document).ready(function() {
	// Muestra y oculta los menús
	$('ul li:has(ul)').hover(
		function(e)
		{
			$(this).find('ul').slideDown();
		},
		function(e)
		{
			$(this).find('ul').slideUp();
		}
	);
});



      
</script>
<script>

          $(document).ready(function(){

              //al hacer click en mostrar:

              $('#mostrar').click(function(evento){

                  evento.preventDefault()
 
                  $('#mostrame:hidden').slideDown();
  
              });
  
              //al hacer click en ocultar:
  
              $('#ocultar').click(function(evento){
  
                  evento.preventDefault()
 

                  $('#mostrame:visible').slideUp();
 
              });

          });
function todos(chkbox)
{
for (var i=0;i < document.forms[0].elements.length;i++)
{
var elemento = document.forms[0].elements[i];
if (elemento.type == "checkbox")
{
elemento.checked = chkbox.checked
}
}
}
</script>
<script>
function enviar_formulario(){
   document.formulario1.submit()
}
</script>  
</head>
<body>

<div id="contenedor">
	<div id="header">
	
		<div id="fyh">
		Hoy es: 16/03/2011 		</div>
	</div>
	<div id="contenido">
		<div id="caja-menu">
		<ul>
	<li>

		<a href="#">Usuarios</a>
		<ul>
			<li><a href="principal.php?mod=usuarios">Crear usuario</a></li>
			<li><a href="usuarios.php?mod=eliminarsuarios">Eliminar</a></li>
			<li><a href="#">Otra opcion</a></li>

		</ul>

	</li>
	<li>
		<a href="#">Modulos</a>
		<ul>
			<li><a href="principal.php?mod=contenido">Gestion</a></li>
			<li><a href="principal.php?mod=contenidomodelo">Modelo</a></li>

		</ul>

	</li>
	<li><a href="#">Encuesta</a>
		<ul>
			<li><a href="principal.php?mod=encuestanueva">Nueva</a></li>
			<li><a href="principal.php?mod=encuestamodelo">Modelo</a></li>
		
		</ul>
		</li>

	<li><a href="#">Mensajeria</a>
		<ul>
			<li><a href="principal.php?mod=mensajesnuevos">Mensajes nuevos</a></li>
			<li><a href="principal.php?mod=mensajes">Todo los mensajes</a></li>
		
		</ul>
		</li>
		
</ul>

			<div id="derecha">
			<span class='mensaje-no-leido'>Tiene 4 mensajes nuevos</span> <span class="logout">
					<a href="destruir.php" >Cerrar sesion</a>
				</span>
			</div>	
		</div>
			<div id="arriba">

		
		<div id="secciones" style="
width:100%;
height:200px;
font-family:martina;">


<a href='#' id='mostrar'/><img src='addusers.png' title='Nuevo' class='imgs' /></a><a href='javascript:enviar_formulario()' id='eliminar'><img src='trash.png' height='48' width='48' class='imgs' title='Eliminar'/></a><br><table border='1' cellspacing='0'cellpadding='0' class='adminlist'><thead><tr><th width='5'> # </th><th width='20'><input type='checkbox' name='todos' value='' onClick='todos(this);'></th><th class='title'><a href='usuarios.php?order=pregunta' title='Haz click para ordenar por esta columna'>Nombre</a></th><th align='center' width='5%'><a href='#' title='Haz click para ordenar por esta columna'>Permiso</a></th></tr></thead><tfoot><tr><td colspan='7'><del class='container'><div class='pagination'><div class='limit'>Mostrar num.<select id='limit' class='inputbox' size='1' name='limit'><option value='5'>5</option><option value='10'>10</option><option value='15'>15</option><option selected='selected' value='20'>20</option><option value='30'>30</option><option value='50'>50</option><option value='100'>100</option><option value='0'>Todas</option></select></div></div></del></td></tr></tfoot><tbody><form action='usuarios.php' name='formulario1' method='POST'><tr class='row1'><td align='center'>1</td><td><input type='checkbox' name='elegir[]' value='13'></td><td><span class='pregunta'><a href='encuestacms.php?option=13'>juan</a></span></td><td align='center'>777</td><tr class='row0'><td align='center'>2</td><td><input type='checkbox' name='elegir[]' value='14'></td><td><span class='pregunta'><a href='encuestacms.php?option=14'>juan22</a></span></td><td align='center'>222</td></div></form><form action ='usuarios.php' method='POST' id='formnew' name='form11'><div id='mostrame'>Usuario: <input type='text' name='usuarios'><br>Contraseña:<input type='text' name='contrasena'><br>permiso:<input type='text' name='permiso'><br><input type='submit' value='aceptar' name='boton'><a href='#' id='ocultar' />Ocultar</a></div></form></form>no exuste</table><br><br>

</div>
<div class="corte"></div>

	
		
		


		</div>

		</div>

	</div>

<div id="footer">
<p style="font-size:18px;color:black;">Juan Carmena © 2010 Todos los derechos reservados.</p>

</div>
</body>

</html> 

[laratik]

Hola juan_14nob, que bonito chorizo . Ahora si al tema, realmente no he visto problemas en que el div footer se quede abajo, de hecho lo visualizo asi:



Y más o menos igual en todos los navegadores. Si quieres puedes colocar una imagen de como lo visualizas, lamento no ser de más ayuda.

Acerca del clear: both lo que realmente hace es colocar debajo de un div que contenga la propiedad float, ya sea izquierda o derecha. No quiere decir que clear:both vaya a ubicar el contenedor debajo de todo el contenido.

[Naahuel]

Yo utilizo con muchísima frecuencia esto:

http://www.cssstickyfooter.com/

100% recomendable, da geniales resultados.