Hola, llevo varias horas dándole vueltas a un problema que tengo al maquetar mi web, y la verdad, que me estoy volviendo loco.
El archivo Html contiene lo siguiente:
<div id="contenedor">
<div id="medio">
a
</div>
</div>
Y el CSS lo siguiente:
#contenedor{
height:auto;
width:100%;
}
#medio{
height:auto;
padding:0;
width:990px;
margin:auto;
background-color:white;
border-right: 1px solid rgb(204, 204, 204);
border-left: 1px solid rgb(204, 204, 204);
border-bottom: 1px solid rgb(204, 204, 204);
}
Entonces, el problema está que cuando mi DIV con ID "medio" coje automáticamente ( al cargar contenido con PHP ) o poniéndole yo manualmente en el CSS una altura mayor a 900px, éste se desplaza unos 5 o 10 px a la izquierda, entonces a la hora de navegar, como en la principal el div es mayor a 900px y en las demás no, deja un efecto al navegar que parece que el diseño se mueve de un lado a otro, bastante feo.
El caso es que llevo bastante tiempo dándole vueltas y no se me ocurre nada, aver si me podéis ayudar.
Os dejo unas capturas de lo que hace:
Con 900px o menos: http://oi50.tinypic.com/rh4zcz.jpg
Con 1000px o más: http://oi46.tinypic.com/20p5xtw.jpg
Un saludo y gracias!
Si te fijas, cuando lo tienes con 900px o menos, el navegador no añade scrollbars. En cambio, con mas de 1000px si. Por eso se te mueve.
2 soluciones.
Activar el scrollbar vertical por defecto
html {overflow-y: scroll;}
O darle un position:absolute a #medio y centrarlo con porcentajes.
#medio {
padding:0;
width:990px;
background-color:white;
border-right: 1px solid rgb(204, 204, 204);
border-left: 1px solid rgb(204, 204, 204);
border-bottom: 1px solid rgb(204, 204, 204);
/* Por defecto el navegador ya aplica height:auto. Asi que no lo uses :P */
height:900px;
/* Posicion absoluta */
position:absolute;
/* Mover 50% a la izquierda */
left:50%;
/* Le quitamos la mitad del ancho del div a la izquierda. Así se centra. */
margin-left:-495px;
}
Saludos
Muchas gracias, poniendo el div como absoluto y centrándolo lo solucioné. La verdad que no llegué a probarlo porque pensaba que con la posición relativa debería hacerlo bien.
Un saludo!