Discussion :

[arnaud_verlaine]

Bonjour à tous.

j'ai un soucis de positionnement de 2 blocs div. Je voudrais qu'ils soient collés l'un à l'autre simplement. Ca fonctionne bien sous FF1/2, IE7, konqeror, mais pas IE6 (majorité des internautes quand même !) donc je dois le résoudre...


voici le code HTML

Code :

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

1
2
3
 
<div id="blocgauche"></div>
<div id="blocdroit"></div>

voici le code CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#blocgauche{
width:155px;
height:250px;
background-color:#64C7EE;
border-left:#DDDDD1 solid 1px;
float:left;
}
#blocdroit{
margin-left:156px;
height:250px;
background-color:#3CB1DC;
}

J'ai essayé de jouer avec les margin, les padding, etc mais sans succès...

Le soucis est bien 3px d'espacement entre les 2 blocs !!

Si je fait ceci au bloc droit :

Code :

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

1
2
3
4
5
6
7
8
 
#blocdroit{
position:relative;
right:3px;
margin-left:156px;
height:250px;
background-color:#3CB1DC;
}

donc en ajoutant :

position:relative;
right:3px;

Ca passe sous IE6, mais plus ailleurs;...

Avez-vous une astuce pour ce fout** bug de IE ?

Merci à vous,

[Candygirl]

Le fameux 3px jog...

Tout d'abord est-ce que le conteneur de ces 2 blocs est de taille fixe ou non ? Si oui, tu peux éviter l'apparition du bug en plaçant tes 2 éléments en float.
Si non, tu n'as guères le choix que de spécifier le correctif pour IE6-. Tu peux le faire par le biais des commentaires conditionnels ou en utilisant un hack, selon ta manière de travailler. Par exemple:

Code :

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

1
2
3
4
5
* html #blocdroit{
position:relative;
right:3px;
margin-right:-3px;
}

Ici l'instruction n'est prise en compte que par IE6 et - les autres navigateurs considérant qu'il ne peut pas y avoir d'élément parent de html

[arnaud_verlaine]

C'était bien cela !!

un tout grand Merci