Bonjour à tous,

Voici la difficulté que je rencontre actuellement :

J'utilise 3 div : un père (id pere) qui contient 2 autres div (d'id respectif fils1 et fils2). Le div fils1 est positionné à gauche dans le père grâce à la propriété float. Le fils2 se place donc à la droite du fils1.

Je souhaiterais maintenant centrer verticalement le fils1 dans le div père, pour ce faire j'utilise la propriété margin-top sur le fils1 avec une valeur de 50%.

Malheureusement le résultat n'est pas celui que je souhaiterais, j'ai l'impression que le div fils1 a une marge de 50% plutôt par rapport à la page que par rapport à son conteneur direct (le pere).

Voici mon code pour éclairer mes propos :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
<html>
	<head>
		<style type="text/css">	
			#pere
			{
				border : solid 3px;
				border-color : red;
				width : 60%;
			}
 
			#fils1
			{
				border : solid 2px;
				border-color : blue;
				float : left ;
				margin-top : 50%;
			}
 
			#fils1 p
			{
				margin : 0;
			}
 
			#fils2
			{
				border : solid 2px;
				border-color : green;
				margin-left : 5em;
			}
 
			#spacer
			{
				clear : both;
			}
		</style>
	<head>
	<body>
		<div id="pere">
			<div id="fils1">
				<p><strong>3 mois</strong></p>
				<p>juin-aout</p>
				<p>2007</p>
			</div>
			<div id="fils2">
				<p>
					Stage chez Acadis (Wiesbaden ? Allemagne) : développement d'une interface graphique 
					permettant de paramétrer les shaders au sein de l'application de visualisation temps réelle Tucan.
					L'interface a été développée avec la librairie QT et un prototype de viewer utilisant OpenGL et 
					GLSL a été élaborée pour tester l'interface.
				</p>
			</div>
			<div id="spacer"></div>
		</div>
	</body>
</html>
Merci d'avance pour vos remarques.