Changement de width qui affecte le height ?

Bonjour à tous. J'ai 2 Div qui sont côte à côte, mais lorsque je change les proportions de largeur de chacun (mainMenuAuthentificationOUT et mainMenuImageOUT), je dois obligatoirement faire un ajustement pour que le div de droit soit toujours centré verticalement (section mainMenuAuthentificationIN).

En clair, ce que j'essais de faire, c'est un div à gauche dont l'image est centrée à la même hauteur que le contenu centré d'un div droit...

Voici le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
 
		<title>Predix</title>
		<style type="text/css">
                        
                        #mainContainer {
                                width:1000px;
                                height:100%;
                                margin-left:auto;
                                margin-right:auto;
                        }
                        
                        #mainMenuImageOUT {
                                width:50%;
                                height:500px;
                                float:left;
                        }
                        
                        #mainMenuImageIN {
                                
                                margin-top:25%;
                                margin-bottom:25%;
                                
                        }
                        
                        #mainMenuAuthentificationOUT {
                                width:50%;
                                height:500px;
                text-align:left;
                float:right;
                
                        }
                        
                        #mainMenuAuthentificationIN {
                                
                                margin-top:40%;
                                margin-bottom:25%;
                        }
                        
                        #btnAuthenticate{
                                
                                float:right;
                        }
                        
                        #notRegistredYet{
                                text-align:center;
                        }
                
                </style>
	</head>
 
	<body>
		<div id="mainContainer">
			<div id="mainMenuImageOUT">
				<div id="mainMenuImageIN">
					<img src="img/predix.jpg" width="200px" height="273px"/>
				</div>
			</div>
 
			<div id="mainMenuAuthentificationOUT">
				<div id="mainMenuAuthentificationIN">
					<form>
					  <fieldset>
					    <legend>Authentification</legend>
					    Nom d'utilisateur: <br />
					    <input type="text" size="30" /><br />
					    Mot de passe: <br />
					    <input type="password" size="30" /><br />
					  </fieldset>
 
					  <input type="submit" value="Consulter les prédictions" id="btnAuthenticate"/>
					</form>
 
				</div>
			</div>
 
			<div id="notRegistredYet">
				<h2>Vous n'avez pas encore fait vos prédictions ?  Faites les<a href="fairePredictions.html"> <i>ici</i></a></h2>
			</div>
 
		</div>
 
 
	</body>
</html>

Merci de bien vouloir m'aider...