Design liquid pose problème

Bonjour, je pose ici mes pages css du site que je construit, j'ai des gros problèmes d'adaptation des résolutions pour les différents clients et je ne m'en sort pas merci de m'aider de me conseiller j'ai cherché des conseils sur le sujet mais en vain merci de m'aider j'en ai vraiment besoin

code css principal

body {
	background: #CECECE;
}


#container {//contient l'ensemble des mes éléments
	position: absolute;
	margin-left: 22%;
	width: 56%;
	background: #FBFCFA;
	box-shadow: 3px 3px 12px #555;
}

#header {//-> vous avez compris
	float: left;
	width: 100%;
	height: 100px;
	background: #fff;
}

#header img {
	vertical-align:-35%;
	padding: 0 35px;
}

#header i{
	font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 22px; /* hauteur du texte : 12 pixels */
}

#nav {//-> mon menu qui a une page css pour lui tout seul(voir plus bas)
	float: left;
	top: 100px;
	width: 100%;
	height: 40px;
	background: #fff;
}

#content {//-> contient tout les éléments du corps de mon site
	float: left;
	top: 140px;
	width: 100%;
	background: #fff; /*#264564;*/
	border-top: 1px solid white;
	box-shadow: 3px 3px 12px #555;
}

#Diapo{//->slide sur l'index
	margin: 10px 3px 0 10px;
	float: left;
	top: 0;
	left: 0;
	width: 100%;
	height: 280px;
}

#T1, #T2 {// -> div qui me permet d'ajouter des élément graphiques
	margin: 17px 0 0 10px;
	float: left;
	width: 48%;
	height: 135px;	
	background: #fff;
	border-radius: 10px;
	box-shadow: 3px 3px 12px black;
}

#T3{// div qui me permet d'ajouter des élément graphiques
	margin: 10px 0 7px 10px;
	float: left;
	width: 48%;
	height: 135px;	
	background: #fff;
	border-radius: 10px;
	box-shadow: 3px 3px 12px black;
}

#Analogique { div qui me permet d'ajouter des élément graphiques
	float: left;
	margin: 110px 0 0 100px;
	width: 310px;
	height: 150px;
	border-radius: 10px;
	box-shadow: 3px 3px 10px black;
}

#Numerique { div qui me permet d'ajouter des élément graphiques
	float: right;
	margin: 110px 100px 0 0;
	top: 250px;
	width: 310px;
	height: 150px;
	border-radius: 10px;
	box-shadow: 3px 3px 10px black;
}

#Accessoires { div qui me permet d'ajouter des élément graphiques
	float: left;
	margin: 63px 0 121px 290px;
	top: 460px;
	width: 310px;
	height: 150px;
	border-radius: 10px;
	box-shadow: 3px 3px 10px black;
}

#Analogique img, #Numerique img, #Accessoires img {
	border-radius: 10px;
}

#produits { div qui me permet d'ajouter des élément graphiques
	float: left;
	margin: 30px;
	width: 822px;
	border-top:1px solid black;
}

#pageproduit { div qui contient l'ensemble des produits de mon site
	position: absolute;
	right: 30px;
	top: 149px;
}

#imgP { div qui contient une image P de mon site répété x fois
	float: left;
	width: 70px;
	height: 190px;
}

#imgB { div qui contient une image B de mon site répété x fois
	float: left;
	width: 224px;
	height: 70px;
}

#imgR { div qui contient une image R de mon site répété x fois
	float: left;
	width: 200px;
	height: 180px;
}

#produitP { div qui contient une description P répété x fois
	float: left;	
	margin: 15px 0 0 35px;
	width: 224px;
	height: 190px;
	font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 12px; /* hauteur du texte : 12 pixels */
	text-align: left;
	box-shadow: 1px 1px 2px black;
	border-bottom-right-radius: 10px;
}

#produitB { div qui contient une description B répété x fois
	float: left;	
	margin: 15px 0 0 35px;
	width: 224px;
	height: 220px;
	font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 12px; /* hauteur du texte : 12 pixels */
	text-align: left;
	box-shadow: 1px 1px 2px black;
	border-bottom-right-radius: 10px;
}

#produitR { div qui contient une description R répété x fois
	float: left;	
	margin: 100px 150px 150px 230px;
	width: 400px;
	height: 300px;
	font-weight : bold; /* on met le texte en gras */
    font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 12px; /* hauteur du texte : 12 pixels */
	text-align: left;
	box-shadow: 1px 1px 2px black;
	border-bottom-right-radius: 10px;
}

#descriptif { div contenant du texte positionné comme souhaité
	padding: 0 20px 0 20px;
	width: 500px;
	height: 180px;
	font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 16px; /* hauteur du texte : 12 pixels */
	text-align: left;
}

#Img1 { position spéciale d'une image
	position: absolute;
	top: 200px;
	right: 20px;
	width: 350px;
	height: 180px;
	border: 1px solid black;
}

#Titre { position spéciale d'un titre
	position: absolute;
	top: 400px;
	right: 440px;
}

#Principe { div contenant du texte positionné comme souhaité
	position: absolute;
	top: 470px;
	right: 20px;
	width: 500px;
	height: 280px;
	font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
    font-size : 16px; /* hauteur du texte : 12 pixels */
	text-align: left;
}

#Img2 {  position spéciale d'une image
	float: left;
	margin: 90px 0 30px 20px;
	width: 330px;
	height: 230px;
	border: 1px solid black;
}


/* ~~ Pied de page ~~ */
#footer {
	float: left;
	width : 100%;
	height: 5%;
	padding: 10px 0;
	background: #264564;
	color:#fff;
	font-size: small; 
	text-align: center;
	box-shadow: 3px 3px 12px #555;
}

mon gros soucis est que lorsque je fait ctrl + molette souris le rendu est déguelasse je bidouille depuis hier mais sans succés. avec des résolutions haute c'est pas trop mal mais j'ai comme vous le constater d'enorme lacune au niveau css

d'avance merci de m'aider