Discussion :

[barok]

Bonjour, j'ai un probleme avec firefox. Je souhaite qu'une div fasse au moins 150px de hauteur et qu'un texte épouse la div.
Voici le résultat sur Opéra (identique à firefox) :


et voici sous IE :


Je souhaite bien sur que le résultat soit le meme que pour IE et identique sur firefox et Opéra.

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
 
<div style="border:solid 1px #123123; width:500px; margin-left:20px; padding:3px 3px 3px 3px;">
	<div style="border:solid 0px #FF0000;">
		<div style="float:left; width:20%;">{TITRE}</div>
		<div style="text-align:right; width:70%;">ref : {REFERENCE}</div>
	</div>
 
	  <div style="border:solid 0px #FF0000; width: 500px; margin-top:5px">
	  	//le probleme se situe ici
		<div style="border:solid 0px #FF0000; padding:10px 10px 10px 10px; float:left; height:150px">
			{IMAGE}
		</div>
		<p style="margin-top:0px; padding-top:0px;">
				{DESCRIPTION}
		</p>
	</div>
	<div style="width: 500px; border:solid 0px #000000">
		<div style="float:left; padding-left:25px; width: 150px; border:solid 0px #000000">Prix : {PRIX} €</div>
		<div style="padding-left:250px;">{AJOUT_PANIER}</div>
	</div>
</div>

En fait ce qu'il se passe c'est que firefox ou Opéra ne remplit pas la div si le contenu est plus grand, chose que fait IE.
Je sais que je peux mettre mon code dans une feuille de style à part, c'est juste que pour le moment je suis en débugage.
Si mon code vous parrait clair, pouvez vous me donner un petit coup de main, ca m'aiderai énormément.
Je vous remercie.

[azertyman]

essaye un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

min-height : 150px

cela indique la hauteur minimum, IE ne la reconnais pas, mais donne un bon resultat quand meme

[barok]

cela ne donne rien. De plus, le probleme reste le meme; lorsque qu'une image fait plus de 150pixels de haut, la div ne s'agrandit pas...

[ilood]

Salut

Le comportement de Fx et d'Opera est normal. Tu places ton image en positionnement flottant, donc elle sort du flux et ne pousse plus son conteneur vers le bas.

Il faut ajouter une proprité clear

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
....
   <div style="width: 500px; border:solid 0px #000000"> 
      <div style="float:left; padding-left:25px; width: 150px; border:solid 0px #000000">Prix : {PRIX} €</div> 
      <div style="padding-left:250px;">{AJOUT_PANIER}</div> 
   </div> 
<!--
ajout
-->
<div style="clear:left"></div>
<!-- fin ajout -->
</div>

[barok]

merci ca marche super bien.