28173 sujets

CSS et mise en forme, CSS3

[Résolu] Solution de contournement d'un bogue d'affichage sous IE6 ?

Bonjour,
Voici la description de mon problème. La structure de mon document est composée de deux boîtes 'div' (boîtes 1 et 2) imbriquées dans une autre boîte 'div' (le conteneur). Le code HTML est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page de test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="conteneur">
		<div id="boite1">Boîte 1</div>
		<div id="boite2">Boîte 2</div>
	</div>
</body>

Je souhaite obtenir les effets d'affichage suivants :
* la boîte 1 est de largeur fixe et est placée à gauche du conteneur,
* la boîte 2 est de largeur fluide et occupe tout l'espace restant à droite du conteneur.
Le code CSS suivant fonctionne très bien sous FF et IE7 : 

body,div {
	margin:0;
	padding:0;
}
	
div#conteneur {
	position:relative;
	margin: 0 10px;
	height: 188px;
	background:black;
}

div#boite1 {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 800px; 
	height: 188px;
	background:red;
}

div#boite2 {
	position:absolute;
	z-index:1;
	top:0;
	left:800px;
	right:0;
	height: 188px;
	background:green;
}

Par contre, sous IE6, la boîte 2 est réduite à la largeur du texte qu'elle contient. Existe-t-il un moyen simple de contourner ce bogue ?
Modifié par patoutis (14 May 2007 - 16:50)
Modérateur
bonjour,

peut-etre en utilisant les flottants.
la premiere boite en float avec sa largeur determinée et l'autre en flux(static sans float) avec un padding ou un margin equivalent a la boite flottante .

Le positionnement absolu est sources d'ennuis et de mauvaises surprsise si il est utiliser pour vouloir maitriser l'affichage.
Bien vu gcyrillus, ta solution résoud bien le problème ! Merci beaucoup.
Merci pour le lien MoOx (mon gabarit ne rentre toutefois pas dans le cadre traité par l'article).
Sujet clos
Aller à