Foro de elhacker.net

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:


Y el CSS lo siguiente:


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!