Que las capas no se monten unas sobre otras

[pedro_delgado]

Ejemplo:

Tienes tres divs, uno adaptado al 100% (ancho y alto) al navegador (imaginemos que el ancho del navegador es 1000px), y otros dos más de 500px de ancho y alto. Metemos estos dos últimos en el primero y le especificamos que uno lo queremos alineado a la dechecha y otro a la izquierda. Hasta ahora bien, encajan a la perfección, ya que entre los dos suman los 1000px de ancho del padre. Pero en el momento en que hacemos zoom positivo (>100%) el padre se sigue adaptando a la ventana así que ahora medirá MENOS de 1000px pero los otros que tienen especificado su tamaño en px no variaran, así que se montarán inevitablemente; y viceversa, si alejas el zoom, ahora el padre medirá más de 1000px y ya no encajarán, sino que dejarán un hueco entre los dos.

Solución:

Si tienes un div que se adapta al tamaño de la ventana (el cual es sensible al zoom), para que no se descuadren deberás evitar definir los tamaños y posiciones en pixeles, o bien en % para la posición y el tamaño, o bien alineaciones para la posición. Si en el ejemplo anterior pones la anchura de los divs al 50% no se descuadrarán cuando hagas zoom nunca.

Espero haberte ayudado,
Un saludo.