Discussion :

[pidu]

Bonjour,

J'ai un problème avec les div et les float/clear, je vous explique:

J'ai un conteneur Gris (#conteneur), qui contient 3 colonnes Rouge (#content_left, #content_center, #content_left). Dans chaque colonne j'ai des petites boites (.box) qui sont affiché une par ligne.

Mon soucis c'est que je n'arrive pas à mettre les 3 colonnes rouges sur la même ligne avec Internet Explorer 6... mais sous Firefox cela marche parfaitement.

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
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
 
/*		conteneur		*/
 
#conteneur {
margin: 0px 50px 0px 50px;
border-left: 1px solid #4D80DF;
border-right: 1px solid #4D80DF;
border-bottom: 1px solid #4D80DF;
padding: 0px;
background-color: #ffffff;
overflow:hidden;
}
 
/*		 content : left, center, right 		*/
 
#content_left {
clear:left; /* ou display: inherit */
width: 33.33%;
padding:0px;
margin:0px;
float:left;
}
 
#content_center { 
width: 33.33%; 
padding:0px;
margin:0px;
overflow: auto;
float:left;
}
 
#content_right {
width: 33.33%; 
padding:0px;
margin:0px;
overflow: auto;
}
 
/*###########*/
/* Class des box */
/*###########*/
 
.box {
padding:0 0 0 11px;
margin:10px;
background:url("../img/tsr-l.gif") top left no-repeat;
}

Sous IE6 j'ai 2 colonne sur la même ligne, et la dernière retourne à la ligne.
Si je rajoute un float:left; à ma div #content_left mes 3 colonnes sortes du conteneur (Mais aucun problème avec FF2)

J'ai parcouru la FAQ mais je n'ai rien trouvé, peut être j'ai zappé l'article ?!

Si vous avez une solution pour régler ce problème... merci d'avance

[Dan_A]

Pour IE (mais pas uniquement) 33.33%+33.33%+33.33%=101% (! ) à cause d'arrondis effectués.
Il faut donc réduire la taille des colonnes pour qu'elles tiennent.
Quelques explications et solutions ici :
http://www.sitepoint.com/forums/show...5&postcount=15

[pidu]

Merci beaucoup !
Je vais tester ça de suite

[pidu]

Nickel, ça marche

Mon autre problème maintenant est que j'effectue un drag and drop des boites dans mes colonnes. Mais quand je les drag d'une colonne à une autre je vois plus du tout mes box, elles passent "derrière" la colonne.

J'utilise Scriptaculous comme librairie js. Des idées ?
J'ai tenté de mettre des zindex sur mes colonnes ou mes box mais ça ne marche pas :/

Il y a aussi un zindex sur la lib js, si quelqu'un bien ce script, ou a un solution en css

Merci d'avance !