Div dans div coupées dans IE pas FF !
Bonjour à tous,
je galère sur une situation, à laquelle je suis étonné de ne pas avoir été confronté auparavant...:arf:
Pour simplifier, j'ai fait un example qui explique mon problème.
Le code :
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 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"> </div>
<a href="">toto le toto</a>
<div class="droite"> </div>
</div>
<div class="element">
<div class="gauche"> </div>
<a href="">toto le toto</a>
<div class="droite"> </div>
</div>
<div class="element">
<div class="gauche"> </div>
<a href="">toto le toto</a>
<div class="droite"> </div>
</div>
<div class="element">
<div class="gauche"> </div>
<a href="">toto le toto</a>
<div class="droite"> </div>
</div>
<div class="element">
<div class="gauche"> </div>
<a href="">toto le toto</a>
<div class="droite"> </div>
</div>
</div> |
Dans FF, si la div "element" toute entière dépasse du conteneur, elle est décalée en dessous
http://www.planete-g.com/images/cas_FF.jpg
Dans IE, la div element est découpée et chaque div contenue ds element est mis en dessous l'une de l'autre !!!
http://www.planete-g.com/images/cas_IE.jpg
http://www.hostingpics.net/viewer.ph...7156cas_IE.jpg
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