Division centrale fixe, division de droite et gauche adaptables

Version imprimable

Bonjour,

Le but du jeu est d'avoir une division centrale de largeur fixe et centrée, (Balise en gris dans l'exemple) puis deux divisions respectivement sur la droite et la gauche, de taille fixe ou variable peu importe.

http://dizanat.fr/tests/exemple.htm
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 <html> <head> <style> body { text-align: center; /* Centrage IE */ } #Corps { width: 1024px; margin: auto; } #Centre { margin: auto; background-color: lightgrey; width: 750px; min-height: 100px; } #Droite, #Gauche { width: 137px; min-height: 100px; } #Droite { float: right; background-color: lightgreen; } #Gauche { float: left; background-color: lightblue; } </style> </head> <body> <div id="Corps"> <div id="Gauche"></div> <div id="Droite"></div> <div id="Centre"></div> </div> </body> </html>
Avec les divisions flotantes à droite et à gauche, et une taille calculée pour chacune des division, en principe ça fonctionne. Sauf qu'en pratique, internet explorer a besoin d'une place additionnelle de 6px pour que l'élément central soit bien positionné. (En principe faire passer la taille du corps de 1024 à 1030 marche)

Je souhaite que les divisions soient effectivement collées, débutent et finissent à la même hauteur. Les divisions de gauche et de droite peuvent s'étendre indéfiniement sur la gauche et la droite et doivent mesurer au minimum 32 px de large. La largeur totale du contenu ne doit pas excéder 1024px. Avez vous une idée pour résoudre cette incompatibilité ?

Je peine à comprendre encore toute la logique, mais les trois divisions en flottantes à gauche, ça marche. Ce n'est pas logique comme modélisation, mais tant pis !

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
<html>
<head>
	<style>
 
body
{
	text-align: center; /* Centrage IE */
}
 
#Corps
{
	width: 1024px;
	margin: auto;
}	
 
#Centre
{
	background-color: lightgrey;
	width: 750px;
	min-height: 100px;
}
 
#Gauche
{
	background-color: lightblue;
}
 
#Droite
{
	background-color: lightgreen;
}
 
#Droite, #Gauche
{
	width: 137px;
	min-height: 100px;
}
 
#Gauche, #Centre, #Droite
{
	float: left;
}
 
 
	</style>
</head>
<body>
<div id="Corps">
	<div id="Gauche"></div>
	<div id="Centre"></div>
	<div id="Droite"></div>
</div>
</body>
</html>

28/07/2006, 19h50
MasterOfChakhaL
la différrence de 6 px vient surement de margin qui ne sont pas pris en compte par IE pour le calcul de la dimension de la boite

rajoute ceci pour commencer ta page (dans le css):
Code:

1 2 3 4 * { margin:0; padding:0; }
il te faudra ensuite définir de manière explicite ces propriétées quand tu en auras besoin, mais au moins, tu auras la maitrise du truc.

et pour ton deuxieme point, c'est normal que ca marche avec left...
si tu prends trois blocs en bois et que successivemment tu les mets le plus a gauche possible, il va y en avoir un a gauche, un au milieu et un à droite...
28/07/2006, 20h15
Blustuff

Non, ce n'est pas évident. Car le W3C spécifie que s'il n'y a pas la place, les éléments flottants (ou non) se retrouvent en dessous.

Pour les margin, j'avais spécifié explicitement une marge de 0 pour les éléments que j'utilisais (C'est la première chose à laquelle j'ai pensé) Le résultat n'était pas positif.
13/10/2008, 12h16
robomatix

J'aimerai savoir comment faire pour avoir une division centrale de largeur fixe et centrée, puis deux divisions respectivement sur la droite et la gauche variable c'est à dire occupant tout la place restante sur la droite et la gauche ( pas limiter à 1024px )...

C'est pour y mettre des images qui se répètent à l'infini.