Un display:inline; perturbateur

[spy74]

bonjour,

j'ai un problème avec un display:inline; qui perturbe totalement ma mise en page et ne remplit pas son role.
le but étant de metre toutes les div collées les une au autre mais dès que j'applique le display:inline; sur la div principale celle-ci disparaît ( ça hauteur et largeur réduit a 0px ). cependant voici le résultat avec ces 2 screeenshoot:

• Sans display:inline;
  
  
• Avec display:inline;
  
  
  

voici le code source correspondant au css;

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
.gSMenu{
	left:181px;
	top:-15px;
	position:absolute;
	z-index:5;
	/*
background-color:#11D;
*/
}
.gSMenu .gSMenuC{
	margin:10px 10px 10px 10px;
	padding:3px 3px 3px 5px;
	background-color:#FFF;
	border:1px #ff8040 solid;
	min-width:500px;
	height:200px;
	overflow-x:scroll;
	position:relative;
	display:inline;
}
.gSMenu .gSMflech{
	top:10px;
	left:1px;
	z-index:6;
	position:absolute;
	height:50px;
	width:10px;
}
.gSMenu .gSMflech i {
	background-repeat: no-repeat;
	display: inline-block;
	z-index:7;
	width:inherit;height:inherit;
	background:url(img/flech.png);
}
.gSMenu .gSMenuC div{
	overflow-y:auto;
	float:left;
}
.gS2Menu {
	visibility:hidden;
}

merci d’avance pour votre aide

[spy74]

tester avec display:inline-block; mais fait na aucun effet les div opère un retour a la ligne quand la div principale n'est pas assez large.

[ornitho13]

applique un float:left, sur les div à la place des display:inline pour les mettre les uns après les autres

[spy74]

c'est déja fait

Code :

1
2
3
4
.gSMenu .gSMenuC div{
	overflow-y:auto;
	float:left;
}

[spy74]

j'ai mit en pièce jointe le code source (il manque les icones mais c'est normal)
si quelqu'un a le temps de test je vois pas trop comment résoudre se problème :s
par défaut je n'est pas mit de display sur la div pour tester l'erreur il sufi de remplacer ça

Code :

1
2
3
4
5
6
7
8
9
10
.gSMenu .gSMenuC{
	margin:10px 10px 10px 10px;
	padding:3px 3px 3px 5px;
	background-color:#FFF;
	border:1px #ff8040 solid;
	width:600px;
	height:200px;
	overflow-x:scroll;
	white-space:nowrap;
}

par ça

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
.gSMenu .gSMenuC{
	margin:10px 10px 10px 10px;
	padding:3px 3px 3px 5px;
	background-color:#FFF;
	border:1px #ff8040 solid;
	width:600px;
	height:200px;
	overflow-x:scroll;
	white-space:nowrap;
	display:inline;
}