Div dans div coupées dans IE pas FF !

**webslave75** · 22/04/2010, 10h30

Bonjour à tous,
je galère sur une situation, à laquelle je suis étonné de ne pas avoir été confronté auparavant...

Pour simplifier, j'ai fait un example qui explique mon problème.
Le 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
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
55
56
57
58
59
60
61
62
*{margin:auto;padding:0;}
#conteneur{
width:580px;
height:200px;
background-color:#999999;
}
.element{
float:left;
margin-right:20px;
margin-top:30px;
}
.gauche{
width:50px;
background-color:#CC0000;
float:left;
}
.droite{
width:30px;
background-color:#66CC66;
float:left;
}
.milieu{
width:200px;
background-color:#0066CC;
float:left;
}
a{float:left;}
</style>
</head>
<body>
<div id="conteneur">
<div class="element">
    	<div class="gauche">&nbsp;</div>
        <a href="">toto le toto</a>
        <div class="droite">&nbsp;</div>
    </div>
 
    <div class="element">
    	<div class="gauche">&nbsp;</div>
        <a href="">toto le toto</a>
        <div class="droite">&nbsp;</div>
    </div>  
 
    <div class="element">
    	<div class="gauche">&nbsp;</div>
        <a href="">toto le toto</a>
        <div class="droite">&nbsp;</div>
    </div>
 
    <div class="element">
    	<div class="gauche">&nbsp;</div>
        <a href="">toto le toto</a>
        <div class="droite">&nbsp;</div>
    </div>
 
    <div class="element">
    	<div class="gauche">&nbsp;</div>
        <a href="">toto le toto</a>
        <div class="droite">&nbsp;</div>
    </div>
 
</div>

Dans FF, si la div "element" toute entière dépasse du conteneur, elle est décalée en dessous

Dans IE, la div element est découpée et chaque div contenue ds element est mis en dessous l'une de l'autre !!!

La question est "comment faire en sorte d'avoir le même comportement dans IE que ds FF (c'est à dire que la div element ne soit pas coupée
sachant que mes div element ont normalement des tailles variables (générée en fonction du contenu) donc que je ne peux pas lui spécifier une largeur précise.

Merci pour votre aide... si nécessaire.

Webslave75

**Yorick** · 24/04/2010, 09h57

Salut,

Tu n'as pas utilisé la classe .milieu, c'est un oubli ou pas ?

**webslave75** · 26/04/2010, 11h25

Bonjour Yorick,
non ce n'est pas un oubli.
Aurais-tu qq chose en tête dans ce sens ?

**Yorick** · 26/04/2010, 11h32

Je sais pas trop, les float c'est parfois très chiant à gérer mais le comportement de FF ne me semble pas aberrant.

Si tu ajoutes la classes .milieu il se comporte comme IE ou pas ?

**webslave75** · 26/04/2010, 11h44

je ne sais plus d'où elle vient cette classe milieu (faut dire j'ai essayé tellement de trucs... en + je ne peux pas spécifier de largeur vu qu'elle varie)...
en tout cas, c'est pas mieux avec...

**Yorick** · 26/04/2010, 12h54

Et je suppose que la hauteur des éléments conteneurs doit être variable aussi...

**webslave75** · 26/04/2010, 14h44

Non, la hauteur est fixe. Mais si je l'indique, ça ne change pas le problème....

**Yorick** · 26/04/2010, 15h41

J'étais pas clair moi vu ce que t'essayes de faire c'était probable que la heuteur soit fixe.

J'ai cherché rapido à régler le pb avec des float mais j'ai pas insisté car de toute façon cette propriété est buggé donc il vaut mieux l'éviter.

Il faut virer les float interne et utiliser des absolute. Les largeurs des éléments ex-floaté est simulé avec le margin du milieu.

Lis le css ce sera plus clair.

(testé que sur IE8)

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
22
23
24
25
26
    *{margin:auto;padding:0;}
#conteneur{
width:580px;
height:200px;
background-color:#999999;
}
.element{
float:left;
margin-right:20px;
margin-top:30px;
position : relative;
}
.gauche{
width:50px;
background-color:#CC0000;
position: absolute;
}
.droite{
width:30px;
background-color:#66CC66;
position: absolute;
right : 0;
}

a{float:left; margin: 0 30px 0 50px;}

**webslave75** · 26/04/2010, 17h59

Yorick, ta solution se rapprochait... mais avec des titres longs... la même chose se reproduisait

Alors... je sais que c'est pas terrible comme solution, mais ça marche.. même pour IE6...
puisque la seule possibilité (d'après mes nombreux tests et applications des conseils reçu ici ou ailleurs) était de spécifier une largeur à la div ".element", j'ai calculé une largeur en php en fonction du nombre de caractères pour le a href.

Vraiment un grand merci Yorick... je pense que les float je vais m'en méfier et m'en servir de moins en moins et plutôt préférer ta méthode.

Webslave

Div dans div coupées dans IE pas FF !

CSS

Discussions similaires

Partager

Partager