Estoy tratando de montar una web, pero me he bloqueado en una cosa y no soy capaz de seguir adelante. El caso es que antes funcionaba, pero no sé qué habré tocado, que ahora no y no consigo ver por qué. A ver si me podéis echar una mano...
Os cuento: se trata de una cabecera, un menú y un pie que van al 100% de ancho y un contenido que llevaría 960px y centrado con margin: auto. Todo parece estar bien en el html y en el css, pero no funciona. Se crea una especie de margen a la derecha (no es el típico de body) y cuando hago la ventana más pequeña se va comiendo todo lo que lleva 100% y el contenido sobresale por la derecha sobre el resto. Para verlo, tengo que mover el scroll que me aparece debajo.
He hecho una especie de boceto con varios colores por si no me he explicado bien.
Espero que alguien pueda ayudarme.
Muchas gracias de antemano.
Código:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
body {
margin: 0px;
}
#header {
height: 300px;
width: 100%;
background-color: rgba(100,0,0,1);
}
#menu {
background-color: rgba(0,150,0,1);
height: 40px;
width: 100%;
}
#wrapper {
margin: auto;
width: 960px;
background-color: rgba(244,144,244,1);
}
#footer {
width: 100%;
height: 100px;
background-color: rgba(0,0,100,1);
}
</style>
</head>
<body>
<div id="header"></div>
<div id="menu"></div>
<div id="wrapper">
<p>sdfg </p>
<p>aewfd</p>
</div>
<div id="footer"></div>
</body>
</html>
