Que las capas no se monten unas sobre otras

[francisco93]

Hola el titulo parece un tanto complicado es que no supe como expresarlo muy bien pero voy a intentar explicarlo mejor en la web que he hecho cuando intentas dar zoom (Ctr + Rueda del mouse) la web se adapta a cualquier ancho de la pantalla es decir siempre se queda al 100% pero se montan las capas div una arriba de la otra, lo que quiero es que cuando aumente las capas div no se monten una arriba de las otras sino se queden tal cual.
Lo siento pero la web se encuentra en localhost y no puedo publicarla.
Gracias por leer y espero puedan ayudarme.

[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.

[francisco93]

Gracias buena explicacion es que llevaba rato con eso, ahora voy a arreglar eso

[cristian_cena]

Estos links te pueden ser útiles.
apilar capas con z-index
maquetación fija y líquida

Saludos.