Problème entre FireFox et IE, l'arrière plan n'est répété dans un DIV [Résolu]

[Dsphinx]

Bonjour,

J'ai un soucis de débutant ! Eh oui, J'ai fais une zone de contenu composé de de trois div les uns après les autres. Le premier c'est le bord haut, le deuxième c'est la zone où je souhaite mettre le contenu (c'est la que ça pose problème) et la troisième c'est le bord bas.

D'abord une image du problème dans Firefox (voir pièce jointe). En fait, c'est que le div qui contient le contenu qui ne s'allonge pas dans le hauteur (#fond-02)...

Code 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
#Tableau_01 {
	position: relative;
	margin: 0px auto auto;
	top:100px;
	left: 180px;
	width:770px;
}
 
#fond-01 {
	width:770px;
	height:28px;
	background: url(../images/fond_01.png) no-repeat;
}
 
#fond-02 {
	width:770px;
	background: url(../images/fond_02.png) repeat-y;
}
 
#fond-03 {
 
	width:770px;
	height:34px;
	background: url(../images/fond_03.png) no-repeat;
}
 
#contenu {
	float:left;
	margin-left: 10px;
	width:520px;
	background: #ffcc99;
}
 
#droit {
	float:right;
	width:140px;
	margin-right: 5px;
	background: #ffcc99;
}

Code Html:

Code :

1
2
3
4
5
6
7
8
9
10
	<div id="Tableau_01">
		<div id="fond-01"></div>
		<div id="fond-02">
			<div id="desMain">
				<div id="contenu"><!-- CONTENU ACCUEIL --> </div>
				<div id="droit"><!-- CONTENU test --> </div>
			</div>
		</div><div id="fond-03">
		</div>
	</div>

Si quelqu'un a une idée car c'est juste une propriété à mettre, mais je ne sais plus laquelle... Merci de votre aide...

[Nesmontou]

Bonjour,

Le problème vient du fait que #contenu et #droit sont positionnés via la propriété float.

Essaies en ajoutant la propriété suivante

Code :

1
2
3
4
#font-02 {
  /* Propriétés existantes */
  overflow: hidden;
}

Tu peux jeter un oeil à cet article : Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire.

Bon développement

[Dsphinx]

Nesmontou, merci de ton aide ! Effectivement, c'était cette propriété qui manquait !

Merci !

PS: l'article de ton lien est intéressant !