Buenas noches a todos!!! Estoy trabajando con mi sitio, lo que sucede es que cuando achico la ventana del navegador el footer queda arriba del contenido, yo necesito que se quede al final del contenedor, independientemente del contenido...
No se si es por que ubique el footer fuera del contenedor principal, ni idea, se agradece desde ya la ayuda..
el sitio es www.pannonica.com.ar
Muchas gracias y saludos!
<style type="text/css">
body,ul,ol,p,table,form,h1,h2,h3,h4,h5,h6 {
padding:0;
margin:0px;
width:
}
html{
height:100%;
}
* html #principal{
height:100%;
}
/*CAMBIE EL HEIGHT DE 100% A 90%*/
body{
margin:0px;
text-align:center;
height:90%;
font-family: Lato, sans-serif;
}
/*
CONTENEDOR DE TODA LA PAGINA
*/
#principal{
width:960px;
text-align:left;
margin-left:auto;
margin-right:auto;
height:auto;
min-height:100%;
}
/*
CONTENEDOR ENCABEZADO
*/
#header{
width:960px;
height:175px;
background-color:#FFF;
}
/*
ENCABEZADO
*/
#logo{
position:absolute;
top:72px;
margin-left:10px;
font-family: Lato, sans-serif;
font-size:27px;
letter-spacing:2px;
}
#diseno{
position:absolute;
top:105px;
margin-left:10px;
font-family: Lato, sans-serif;
font-size:16px;
z-index:20;
}
#amarillo{
width:226px;
height:22px;
position:absolute;
top:105px;
margin-left:0px;
background-color:#FFCC00;
z-index:2;
}
/*
BOTONERA
*/
#menu{
position:absolute;
top:105px;
width:506px;
height:1px;
margin-left:730px;
font-size:19px;
}
A:link {text-decoration:none;color:#333;}
A:visited {text-decoration:none;color:#4B4B4B;}
A:active {text-decoration:none;color:#999;}
A:hover {text-decoration:none;color:#666;}
/*
CONTENEDOR DE CONTENIDO
*/
#contenido{
width:960px;
top:200px;
height:auto;
min-height:100%;
}
/*
ESTILOS DEL INDEX
*/
#slider{
width:309px;
height:159px;
position:absolute;
}
#marco{
width:309px;
height:159px;
position:absolute;
margin-left:651px;
background-color:#FFCC00;
}
#ruido{
width:250px;
font-size:27px;
line-height:24px;
margin-left:30px;
margin-top:26px;
}
#ruidotxt{
width:250px;
font-size:16px;
line-height:17px;
margin-left:30px;
margin-top:8px;
}
#hacemos{
position:absolute;
top:345px;
margin-left:651px;
font-size:24px;
}
#hacemostxt{
position:absolute;
top:379px;
margin-left:651px;
width:309px;
font-size:13px;
}
#vamos{
position:absolute;
top:516px;
margin-left:651px;
font-size:24px;
}
#vamostxt{
position:absolute;
top:550px;
margin-left:651px;
width:306px;
font-size:13px;
}
/*
CONTENEDOR DEL FOOTER
*/
#footer{
width:960px;
height:114px;
background-color:#202221;
text-align:left;
margin-left:auto;
margin-right:auto;
}
/*
FOOTER
*/
#mail{
padding-left:8px;
background-color:#333332;
position:absolute;
margin-top:20px;
margin-left:655px;
font-size:26px;
color:#FFF;
width:270px;
}
#derechos{
padding-left:10px;
background-color:#333332;
position:absolute;
margin-top:20px;
margin-left:15px;
font-size:12px;
color:#FFF;
width:420px;
}
</style>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pannonica diseño gráfico y comunicación</title>
<link href="http://fonts.googleapis.com/css?family=Lato: regular, bold" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="principal">
<div id="header"><!--ENCABEZADO-->
<div id="logo"><p>PANNONICA</p></div>
<div id="diseno"><p>diseño gráfico y comunicación</p></div>
<div id="amarillo"></div>
<div id="menu">
<a href="index.php">home</a>
<a href="trabajos.php">trabajos</a>
<a href="contacto.php">contactanos</a>
</div>
</div><!--FIN ENCABEZADO-->
<div id="contenido"><!--CONTENIDO-->
<div id="slider"><img src="img/001.png" alt="logotipo de mi sitio"/></div>
<div id="marco">
<div id="ruido"><p>Menos ruido<br/>mas comunicación.</p></div>
<div id="ruidotxt"><p>Ayudamos a nuestros clientes en la proyección de su marca, trabajando
en etapas para cumplir un objetivo.</p></div>
</div>
<div id="hacemos"><p>Que Hacemos</p></div>
<div id="hacemostxt"><p>Nuestra prioridad en todos los proyectos es lograr que el mensaje de nuestro cliente sea visible,
logrando así el primer objetivo que es la comunicación, la razón de ser del diseño gráfico y de cada pieza gráfica.</p></div>
<div id="vamos"><p>Hacia donde vamos</p></div>
<div id="vamostxt"><p>Nuestro objetivo es trabajar profesionalmente de manera conjunta con el cliente poniendo en práctica
la experiencia y aspirando siempre al crecimiento.</p></div>
<br/><br/><br/><br/><br/>
</div><!--FIN CONTENIDO-->
</div>
<div id="footer"><!--FOOTER-->
<div id="gris" style="background-color:#333332;">
</div>
<div id="gris1" style="background-color:#333332;">
</div>
<div id="derechos">
<p>PANNONICA®. Todos los derechos reservados 2012<br/>
Sitio web optimizado para Firefox 3.5, Chrome 5.0, IE 6, Safari 3.1 o posteriores</p>
</div>
<div id="mail">
<p>
[email protected]</p>
</div>
</div><!--FIN FOOTER-->
</body>
</html>