Problema al maquetar con 2 Divs

[soru13]

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:

Código [Seleccionar] Expandir


<div id="contenedor">    
     
     <div id="medio">
a
     </div>

</div>


Y el CSS lo siguiente:

Código [Seleccionar] Expandir


#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!

[#!drvy]

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

Código (css) [Seleccionar] Expandir

html {overflow-y: scroll;}

O darle un position:absolute a #medio y centrarlo con porcentajes.

Código (css) [Seleccionar] Expandir

#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

[soru13]

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!