[Résolu] Problème IE avec 3 colonnes

Bonjour,

J'ai un petit souci avec mon design sous IE.

En fait, j'ai un design sur 3 colonnes mais la colonne du milieu ne se met pas à "la même hauteur" que les deux autres. Elle est bien située au milieu mais est décalée vers le bas.

Voici la structure classique de ma page:

<div class="gauche"></div>
<div class="droite"></div>
<div class="contenu"></div>

Et voici ma feuille de style:

div.gauche
{ 
background-image: url('../images/gauche.gif');
width: 171px; 
height: 125px; 
position: absolute; 
left: 0; 
float: left; 
}

div.droite
{ 
background-image: url('../images/droite.gif');
width: 219px; 
height: 125px; 
float: right; 
}

div.contenu
{ 
background-image: url('../images/contenu.gif');
width: 326px; 
height: 125px; 
margin-left: 171px;
margin-right: 219px; 
}

Par contre, sous Firefox, tout fonctionne à merveille.

Ca doit vraiment être un petit truc tout bête mais je ne le vois pas

Merci de votre aide,

Richard
Modifié par Icwee (15 May 2006 - 19:56)

Coucou,

Si tu veux revoir quelques petites choses sur le positionnement : Comprendre le positionnement des balises en CSS
(Pour ma part, avec ton code je vois deux colonnes à gauches, et une tout à droite.)

Pour obtenir ce que tu veux, tu peux utiliser uniquement la position "float: left"; : cocorico (trois colonnes flottantes).

Le code associé à l'exemple :

CSS : 

body {
	margin: 50px 0 0 0;
	padding: 0;
	}
	
#conteneur {
	width: 702px;
	margin: auto;
	}
[#orange]
#gauche { 
	background-color: blue;
	width: 200px; 
	height: 125px;
	[b]float: left;[/b]
	}

#contenu { 
	border: 1px solid #000;
	width: 300px; 
	height: 123px; 
	[b]float: left;[/b]
	}

#droite {
	background-color: red;
	width: 200px; 
	height: 125px; 
	[b]float: left;[/b]
	}
[/#]

BALISAGE : 

<div id="conteneur">[#orange]
	<div id="gauche"></div>
	<div id="contenu"></div>
	<div id="droite"></div>[/#]
</div>

Bonjour,

Merci, ça fonctionne maintenant
J'ai repris un peu tout le code, il y avait pas mal d'erreur ou de balises inutiles.

Richard