18067 sujets

Questions générales et questions de débutants

Positionnement div [resolu]

Bonjour,

excusez-moi, mais j'ai un petit problème et j' ai beau chercher sur ce forum et dans l'excellent livre de Raphael Goetter CSS2, je ne trouve pas la réponse qui doit être bien simple pourtant.

Quand je positionne deux div l'un à coté de l'autre, tout va bien pour firefox mais en revanche, pour IE6, les deux blocs ne se collent pas...

Xhtml:


<body>

<div id="premier"></div>
<div id="second"></div>

</body>


CSS:

body {background-color:#000000;
}

div {
border: 1px solid orange
}

#premier {
margin:0;
padding:0;
height:150px;
width:150px;
background-color:#CC0033;
float:left;
}

#second {
margin:0;
padding:0;
height:100px;
background-color:#330066;
}

PS: bien que les div ne comportent pas de marges par défaut, je les ai supprimées au cas où... mais non, cela ne change rien...

Au secours, je ne vois pas la réponse qui doit être bien simple!!
Modifié par pld (25 Jun 2006 - 14:36)
Salut,

Je te rassure, ça n'a rien de simple.
Déjà concernant Firefox (et les navigateurs conformes) : avec ce code les deux div ne sont pas à coté l'un de l'autre, mais une partie du second reste sous le premier. Pour t'en rendre compte, tu peux lui donner une hauteur plus grande, genre 200px.
Pour le placer à coté, tu peux mettre une marge de gauche. Ou, autre solution, lui appliquer {overflow:hidden;} ou {overflow:auto;}

Concernant IE, il y a un bug célèbre en jeu : le « Three pixel jog ». Tu peux voir deux exemples de ce bug ICI. Dans ton cas, c'est le deuxième exemple : la version avec layout. C'est de là que viennent ces trois pixels qui séparent les deux blocs. Si c'est « avec layout », c'est du fait du height que tu utilises sur div#second (voir toutes les propriétés qui confèrent le layout).
Pour réduire ces trois pixel, il est possible d'utiliser la position relative pour décaler à gauche de trois pixel, et d'ajouter ces trois pixel à droite via une marge négative. Et comme ceci ne vaut que pour IE5/6 win, utiliser le commentaire conditionnel :
<!--[if lte IE 6]>
<style type="text/css">
#second {
	position:relative;
	left: -3px;
	margin-right: -3px;
}
</style>
<![endif ]-->

Mais le plus simple serait peut-être de ne pas mettre ce height:100px;, d'ajouter un peu de contenu aux blocs, et d'utiliser simplement une marge de gauche.

ps: pense à mettre ton message en forme (le code) avant qu'un modérateur te choppe Smiley sweatdrop
Modifié par Alan (26 Jun 2006 - 12:57)
Sujet clos
Aller à