Tienes un sitio web, pero las cajas div no se están alineando bien. Esto podría suceder por varias razones, especialmente si considera los problemas de posición con divs de un sitio web a otro. De manera similar, los elementos de cuadro pueden superponerse por varias razones, que van desde errores de posicionamiento hasta problemas de desbordamiento y problemas simples de flotación. En la mayoría de los casos, un cambio rápido y fácil a la hoja de estilo de su sitio web solucionará el problema.

1.

Agregue un margen si las casillas actualmente no tienen márgenes y se superponen solo por una pequeña cantidad. Puede establecer un margen en un solo lado, como en el lado izquierdo, si solo desea utilizar el elemento de margen para alejar el otro elemento de cuadro. Por ejemplo, si div A y div B se colocan uno junto al otro y div B se superpone en el lado izquierdo, puede modificar su hoja de estilo para agregar un margen del lado izquierdo a div A de la siguiente manera:

a {ancho: 100px; margen izquierdo: 10px; }

2.

Busque en su hoja de estilo los valores de posicionamiento que pueden causar superposición y modifíquelos. Si está utilizando el posicionamiento absoluto para organizar los elementos div de su sitio web, entonces es un elemento gratuito para todos: cualquier elemento puede superponerse a cualquier otro elemento de la página. Entonces, si tiene div A configurado como 100 píxeles de ancho y 15 píxeles desde la parte superior e izquierda de la página, div B tendrá que estar al menos 115 píxeles a la izquierda para no superponer el div A. Puede especificar la posición desde el Arriba o abajo, y desde la derecha o izquierda.

3.

Establecer un div con un ancho específico y ocultar el desbordamiento. Esto evita que el div supere un tamaño específico y evita que el contenido se derrame, por así decirlo. Por ejemplo, si el div A no tiene un ancho establecido y pones una imagen grande en él, el div se expandirá automáticamente para adaptarse a la imagen. Si establece el ancho, la imagen aún se mostrará más allá de los bordes del div, pero el div no se expandirá. Si oculta el desbordamiento, la imagen solo se mostrará dentro de los límites del div y no expandirá el elemento. Por ejemplo, para configurar la div A en 200 píxeles de ancho y no para desbordar, usaría este código de estilo:

a {ancho: 200px; desbordamiento: oculto; }

4.

Use la opción "flotar" para apilar cajas div de lado a lado automáticamente. Por ejemplo, quieres que div A actúe como una barra lateral y div B para mantener tu contenido: puedes hacer que ambos divs fluyan hacia la izquierda, lo que hace que se alineen horizontalmente. Los elementos div flotados no se superpondrán. Un ejemplo de dos elementos flotantes se ve algo como esto:

a {ancho: 150px; flotador izquierdo; }

b {ancho: 400px; flotador izquierdo; }

Consejos

• Si usa Firefox, puede hacer clic con el botón derecho en un cuadro y elegir "Inspeccionar elemento". Esto le brinda un resumen visual de cada elemento que a menudo puede ayudarlo a identificar un problema especialmente difícil.
• Puede configurar el desbordamiento para que se oculte solo en el eje x o y usando "overflow-x" o "overflow-y".