Amplio un poco en caso que nadie me entendio lo que quiero hacer... Segui trabajando en la pagina y dentro del footer, tengo varios elementos que hacen exactamente lo que quiero que hagan
El nuevo HTML:
<html>
<head>
<title>Documento sin título</title>
<link href="CSS/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><img src="images/imagen1.jpg" width="298" height="300" /></div>
<div id="logo"><img src="images/logo.png" width="373" height="208" /></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div id="footer">
<h2>No te subscribiste aún?, Unete ahora!</h2>
<p>Donec est dolor, pharetra ac consectetur vel, pretium nec dui. Duis dignissim viverra nisi vitae molestie. <br> Proin pulvinar accumsan leo, id rutrum dui consequat quis. Sed at risus quis eros venenatis semper. Quisque neque tellus, dignissim sed ac nunc. Phasellus vitae tellus metus nulla</p>
<p>Para mayor información o cualquier consulta por favor visita a Cachito | Pedrito, nuestros agentes autorizados de ventas.</p>
<p>Politica de Privacidad | Terminos y Condiciones | Webmasters | Contactanos</p></div>
</body>
</html>
Y el nuevo CSS:
* {
margin:0px;
padding:0px;
}
body {
width:100%;
text-align:center;
}
#header {
width:100%;
border-bottom:#666 solid 1px;
text-align:left;
margin-bottom:40px;
}
#logo {
width:373px;
height:208px;
position:absolute;
top:80px;
left:170px;
border:none;
}
.caja {
width:410px;
height:350px;
margin:15px;
text-align:center;
border:#333 solid 1px;
border-radius:10px;
position:relative;
float:left;
}
#footer {
width:100%;
margin-top:30px;
margin-bottom:30px;
text-align:center;
position:relative;
float:left;}
#footer h2 {
font-family:Arial, Helvetica, sans-serif;
font-size:60px;
margin:auto;
padding-top:20px;
padding-bottom:40px;
}
#footer p {
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
margin:auto;
padding:20px 0px;
}
Para apreciar lo que intento decir hagan lo siguiente: Click en el boton "restaurar" de tu navegador. Una vez que la ventana del mismo se achico arrastrar con el mouse de un extremo para hacerla mas angosta. Veran que todo lo que esta incluido en el "footer" acompaña dicho movimiento manteniendose centrado en todo momento. No asi las cajas del body, que si bien se van "apilando" abajo cuando comienza a haber menos espacio, nunca quedan centradas en el body.
Entiendo que esto es porque en el footer se trata siempre de un solo elemento h2, o p y no tienen la propiedad float:left. En el caso de las cajas pasa todo lo contrario, tienen la propiedad float:left (por eso justamente flotan a la izquierdan y no se centran) pero si no pusiera esa propiedad apareceria todas una abjo de otra y no ocupando todo el ancho del body como yo quiero.
Ahi es donde me perdi y no se como resolverlo.
Bueno nuevamente muchas gracias por leer, y si se les ocurre cualquier cosa sera muy apreciado.