Este es un problemilla que me surge habitualmente, pero como suelo arreglarlo mediante truquillos, nunca le presto demasiada atención. Ahora me apetece compartirlo con vosotros para encontrar el por qué de este comportamiento.
Vean:
Código HTML:
/* Estilos generales */
*{margin:0;padding:0;outline:0;}
html,body {margin:0;padding:0;outline:0;background:#393;}
/* Estilos */
.corte {clear: both;}
/* CONTENEDORES */
#contenedor{
font: normal 12px Georgia, Arial, Helvetica, Verdana, sans-serif;
width:960px;
margin:0px auto;
color:#333;
background:#ddd;
/*border-top:1px solid #f63;*/
box-shadow: 0px 0px 20px #333;
}
/* CABECERA */
#cabecera{
width:auto;
height:auto;
background:#f63;
margin-bottom:20px;
}
#cabecera #slider{
float:left;
width: 600px;
height:300px;
background:#f00;
}
#cabecera #texto-bienvenida{
float:right;
width: 300px;
height:300px;
background:#00f;
}
#contenido{
width:auto;
height:auto;
background:#f0f;
margin-bottom:0px;
}
#especialidades, #ubicacion, #reservas{
/*margin-top:25px;*/
float:left;
width:300px;
height:150px;
background:#f63;
}
#especialidades, #ubicacion{
margin-right:30px;
}
#pie{
clear:both;
height:30px;
background:#363;
width:auto;
text-align:center;
margin-top:0px;
}
y aqui el html:
Código HTML:
<!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" lang="es-es"> <head> <title>prueba web</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="lang" content="es" /> <link rel="stylesheet" href="i-css.css" type="text/css" media="screen"/> </head> <body> <div id="contenedor"> <div id="cabecera"> <div id="slider">slider</div> <div id="texto-bienvenida">bienvenida</div> <div class="corte"></div> </div> <div id="contenido"> <div id="especialidades">especialidades</div> <div id="ubicacion">ubicacion</div> <div id="reservas">Horario y reservas</div> <div class="corte"></div> </div> <div id="pie">pie</div> </div> </body> </html>
2.- El problema, como veis, es que el contenedor se me desplaza con respecto del borde superior. Esto ocurre cuando le aplico un margen superior o inferior, a cualquiera de los divs contenidos dentro del contenedor (cabecera, contenido o pie)
3.- El problema se arregla si le aplico un border-top a la div contenedor (prueben a quitarle los comentarios a la linea border-top que hay en el css de la cabecera)
4.- El problema también se soluciona si le quito height auto a los div hijos del contenedor y lo sustituyo por su tamaño en pixeles y le quito los div class corte al html. Esta solucion no me gusta, ya una vez que vaya metiendo los contenidos reales en la web, quiero que se ajusten al contenido con height:auto
Bueno amigos, opinen. Muchas gracias por su colaboracion
