Bonjour,

Je souhaiterai positionner 5 element (div) "en croix" en fonction des dimensions d'une div containeur, avec un 6eme element en dessous, le tout contenu dans une div "racine".
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
 
 -----------------------------
|                             |
|   -----------------------   |
|  |E1                   E2|  |
|  |                       |  |
|  |                       |  |
|  |          E3           |  |
|  |                       |  |
|  |                       |  |
|  |E4                   E5|  |
|   -----------------------   |
|                             |
|  <---------E6----------->   |
|                             |
 -----------------------------
voici mon code:

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<html>
    <head>
        <style> 
             div#R {
                 width:650px;
                 height:900px;
              }         
              div#C1 {
                 width:650px;
                 height:750px;
              }
              div#E1 {
                 margin-top: 0%;
                 float:left;
                 width:200px;
                 height:130px;
              }
              div#E2 {
                 margin-top: 0%;
                 float:right;
                 width:200px;
                 height:130px;
              }
              div#E3 {
                 margin-top: auto;
                 margin-left: auto;
                 margin-right: auto;
                 margin-bottom: auto;
                 width:200px;
                 height:130px;
              }
              div#E4 {                  
                 margin-top: 75%;
                 float:left;
                 width:200px;
                 height:130px;
              }
              div#E5 {
                 margin-top: 75%;
                 float:right;
                 width:200px;
                 height:130px;
              }
              div#E6 {
                 margin-bottom: 0%;
                 width:600px;
                 height:150px;
              } 
        </style>			
    </head>
 
    <body>
		<div id = "R">					
			<div id = "C1">
 
				<div id = "E1"> E1 </div>
 
				<div id = "E2"> E2 </div>
 
				<div id = "E3"> E3 </div>
 
				<div id = "E4">	E4 </div>
 
				<div id = "E5"> E5 </div>
 
			</div>
 
			<div id = "E6"> E6 </div>
 
		</div>	
    </body>
</html>
mais a part E1 et E2 rien n'est placé comme il faut, E3 et entre E1 et E2, E4 et E5 sont en dehors de R.