¿Por qué el contenido de esta página cambia algunos píxeles hacia la izquierda / derecha?

Estoy usando un diseño de “Centered Header / Footer / 2 column CSS”.

En https://stackoverflow.com/questions/938608/why-does-the-content-of-this-page-shift-a-few-pixels-to-the-left-right/test1.htm, si el contenido de la página es mínimo y el pie de página está completamente visible en la ventana del navegador, al hacer clic en https://stackoverflow.com/questions/938608/why-does-the-content-of-this-page-shift-a-few-pixels-to-the-left-right/test2.htm, el contenido de la página se desplaza hacia la izquierda.

Si https://stackoverflow.com/questions/938608/why-does-the-content-of-this-page-shift-a-few-pixels-to-the-left-right/test1.htm tiene suficiente contenido para alejar el pie de página de la parte inferior de la ventana del navegador, al hacer clic en https://stackoverflow.com/questions/938608/why-does-the-content-of-this-page-shift-a-few-pixels-to-the-left-right/test2.htm, el contenido de la página permanece estático.

¿Alguien puede ayudar con este problema CSS?

https://stackoverflow.com/questions/938608/why-does-the-content-of-this-page-shift-a-few-pixels-to-the-left-right/test1.htm

     body, html { margin:0; padding:0; font-size: 1em; font-family: Verdana, Arial, Helvetica, sans-serif; } #wrap { width:912px; margin:0 auto; background:Green; } #header { background-color:Gray; height: 120px; } #leftColumn { float:left; width:230px; padding: 0 10px 10px 10px; background:Red; } #rightColumn { float:right; width:642px; padding:10px; background:#fff; font-size: 0.7em; color: #828589; } #footer { clear:both; padding:5px 10px; background-color:Gray; }    

left column







Page Title

"test 1 "















some words... <!--









































-->

https://stackoverflow.com/questions/938608/why-does-the-content-of-this-page-shift-a-few-pixels-to-the-left-right/test2.htm

      body, html { margin:0; padding:0; font-size: 1em; font-family: Verdana, Arial, Helvetica, sans-serif; } #wrap { width:912px; margin:0 auto; background:Green; } #header { background-color:Gray; height: 120px; } #leftColumn { float:left; width:230px; padding: 0 10px 10px 10px; background:Red; } #rightColumn { float:right; width:642px; padding:10px; background:#fff; font-size: 0.7em; color: #828589; } #footer { clear:both; padding:5px 10px; background-color:Gray; } * html #footer { height:1px; }    

left column







Page Title

"test 2 "















some words...













some words...









































Parece que la primera página es lo suficientemente corta para mostrarse sin barras de desplazamiento, mientras que la segunda página no.

Una barra de desplazamiento ocupa espacio, por lo que el canvas es más estrecho, por lo que el centro del canvas está más alejado de la barra de desplazamiento.

Las soluciones son utilizar desbordamiento para mostrar una barra de desplazamiento todo el tiempo (no lo sugiero, permite el desplazamiento cuando el desplazamiento no puede suceder) o usar un diseño alineado a la izquierda (como la mayoría de la WWW)

Esto sucede porque test2.htm tiene la barra de desplazamiento a la derecha -> eso hace que el ancho de test2.htm sea menor que el ancho de test1.htm -> la posición del contenido centrado es contada por el navegador teniendo diferentes valores de ancho => es por eso que la posición izquierda es diferente en cada caso…

El margen automático para izquierda y derecha del #wrap div hace que todo el contenido se centre en el ancho disponible del cuerpo. En test2, el ancho disponible se reduce por la apariencia de la barra de desplazamiento, por lo que el contenido parece desplazarse hacia la izquierda a la mitad del ancho de la barra de desplazamiento.

Así que parece que la página con más contenido obliga a la ventana del navegador a tener una barra de desplazamiento, esto a su vez empuja el div centrado hacia la izquierda ya que el área disponible se ha reducido por la apariencia de la barra de desplazamiento.

Entonces la posible solución es no tener un div centrado, es decir, cambiar el wrap id css a

 #wrap { width:912px; margin:0 0 0 0; background:Green; } 

esto no se veía bien con lo que estaba trabajando.

Otra solución fue el desbordamiento, es decir, agregar esto

  html { overflow:scroll; } 

esto realmente se ve bien, así que probablemente vaya con eso.

Encontré otra solución usando JQuery basado en esto

actualizar #wrap a

 #wrap { width:912px; margin:0 0 0 0; background:#fff; visibility: hidden; } 

luego usa lo siguiente en cada página

   

¿Por qué hacer todo eso cuando todo lo que tienes que hacer es mantener la barra de desplazamiento siempre visible?

 html{ height:101%; } 

Su mejor opción es no preocuparse por la barra de desplazamiento. Usted está arreglando un “problema” que no existe. Cada sitio web centrado tiene el mismo problema.

Es el “comportamiento esperado” y ninguno de sus usuarios notará que su página se mueve un par de píxeles a la izquierda, especialmente si hay una actualización de página.

Piénselo: ¿alguna vez lo ha notado en otros sitios?

 height: 100%; overflow-y:scroll; 

Para mi sitio no había “meneo” entre las páginas de Safari, solo lo noté en Firefox, y la sugerencia de Paul Rowland de utilizar el overflow: scroll funciona perfectamente, porque el sitio no se ve afectado en Safari, pero se corrigió en Firefox. Muy útil y gracias!

No puedo creer que en este sitio haya sugerencias como “no te preocupes por eso”, no bajes el voto al olvido.

Muchas gracias, chicos. Estaba teniendo el mismo problema de cambio de texto esta noche y tuve la suerte de encontrar este sitio y sus sugerencias anteriores.

Mis dos páginas se comportaban de la misma manera: una creaba una barra de desplazamiento y la otra no. El problema del cambio de texto se resolvió agregando el siguiente código al archivo style.css:

html { overflow:scroll; }

Si está cargando javascript para mostrar un botón de me gusta de Facebook o de otra fuente como esa, la página cargará el div de Facebook que se encuentra allí y luego se deshará de él causando un cambio. Intenta usar css para la corrección para darle a ese facebook / cualquier div una altura establecida.