Aclarar que hará un año que no toco nada de css ni de html perdón por mi falta de conocimientos.

Bien el tema es que estoy haciendo una web muy simple que me han encargado, solo consta de la página principal con un reproductor. El problema es, que al hacer zoom (-) se me descolocan los divs. Creía que esto se solucionaba cambiando el tamaño de estos, es decir en vez de ponerlo en píxeles cambiarlo por pocentaje. Lo he probado y sigue sin dar efecto.

¿Tendría que cambiar todo el codigo de px a porcentaje, o solo al container que es el que engloba y el que no me interesa que se mueva?


Perdón se que me explico fatal, dejo el codigo por si no es ese mi fallo :

 

body{
	background-image:url("../img/fondo.jpg");
	background-repeat:no-repeat;
	background-size:1920px 1000px;
	font-family:Arial;
 
}
/*-----------container----------*/
#container{
	position:relative;
	margin:0 auto;
	width:1024px;
	height:768px;
	background-color:black;
	border:10px solid white;
	border-radius: 15px 15px 30px;
	margin-top:50px;
 
}
 
 
/*-----------main----------*/
#main{
	width:1024px;
	height:718px;
	float:right;
	font-size:13px;
 
}
 
/*-----------footer----------*/
#footer{
	height:50px;
	width:1024px;
	float:left;
	background-color: white;
 
 
}
#footer p{
	font-family:Arial;
	font-weight:bold;
	text-align:center;
}
#video{
	width:1024px;
	height:718px;
}

Así sin mas datos es difícil averiguar cual es el problema. Pero de primeras si a ahcer zoom te refieres a modificar el tamaño de la ventana, el problema debe ser que alguno de los elementos no varía las proporciones y es por eso que se recoloca.

Si el contenedor de los elementos varía, todo debe variar en la misma proporción para seguir igual.

Si nada varía su tamaño en píxeles, entonces el problema esta en que es el screen size quien varía sus proporciones y entonces tendrías que usar media queries.