Discussion :

[KneXtasY]

Bonsoir,

Je réalise un petit site et je suis confronté a un problème d'affichage sous IE.

J'ai une image flottante avant une div.

Si l'image est plus grande que la div, l'image empiète sur l'espace dans dessous.
Alors que sous Firefox, la div se redimensionne pour passer en dessous de l'image.

Est ce normal ?
Y a t-il un moyen pour y remédier ?

Merci !

[guignol]

Je ne connais pas trop le terme "image flottante", mais j'imagine à quoi cela correspond.

Si tu utilises une balise <img> pour ton image, tu rajoute les attributs width et height qui fixeront la taille de ton image.

[ilood]

Salut,

Normalement un élèment positionné en float sort du flux normal. donc il est normal que l'image "sorte" du div. Etonnant que sous Firefox tout se passe bien.
Tu pourrais poster le morceau de code html et css qui pose problème ?

[giminik]

si tu veux annuler le flottement regarde la propriété http://www.w3.org/TR/CSS21/visuren.html#propdef-clear
mais c'est vrai qu'un bout de code ne serait pas de refus...

[KneXtasY]

Je vous remercie.

Pour les curieux voila le code :

Code :

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

1
2
3
4
5
6
7
8
9
<div class="box-article">
	<div class="top-bottom">
		<b>Le titre</b>
	</div>
	<div style="float:left;"><img src="./images/image.jpg" alt=""></div>
	<div class="article">
		Le texte .........
	</div>
</div>

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
.box-article {
border:1px solid #eeeeee;
margin-bottom:20px;
overflow:auto;
font-size : 80%;
}
 
.top-bottom {
background-color:#eeeeee;
padding:2px 0px 2px 10px;
border-bottom : 1px dashed #003399;
color : #003399;
background-image: url("../images/bg_title.gif")
}
 
.article {
padding:10px 10px;
background: white;
}

[ilood]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="box-article">
	<div class="top-bottom">
		<b>Le titre</b>
	</div>
	<div style="float:left;"><img src="./images/image.jpg" alt=""></div>
	<div class="article">
		Le texte .........
	</div>
<!-- ajout de clear:both -->
<div style="clear: both"></div>
</div>

Il semblerait que le div se redimensionne sous firefox grâve au oveflow: auto;
Comme le proposait giminik, il faut annuler le flottement. On utilise une balise avec la propriété clear: both;

J'ai mis le style dans le html, mais rien ne t'empeche de créer une classe dans ta feuille de style.

[KneXtasY]

Merci beaucoup ça marche super ! 8)
C'est une astuce que je n'oublirais pas.