Div en float largeur restante

Bonjour,

Voilà mon problème, j'ai deux div en float générées par mon cms, et je voudrais qui si l'une n'est pas générée (car vide) l'autre prenne l'ensemble de la largeur.

Mon code :

<div id="contenant" style="width:600px">
<div id="gauche" style="width:largeur restante;"></div>
<div id="droite" style="width:200px;"></div>
</div>

Voilà, là div droite ne sera pas toujours présente, comment faire alors pour que la gauche prenne l'ensemble des 600px.

Merci d'avance

Bab

Il faut que la div de droite soit en premier dans le code HTML, pour la faire flotter.

Les éléments flottants ne repoussent pas les blocs, mais uniquement le contenu de ces blocs. Pour éviter des effets de chevauchement des images de fond, de texte qui repasse à la ligne en dessous d'un bloc flottant, etc., on oblige div#gauche à s'adapter au flottant grâce à un contexte de formatage.

div#droite {
	float: right;
	width: 200px;
	margin-left: 10px;
}
div#gauche {
	overflow: auto;
}

Petite subtilité : IE7 comprend correctement le overflow: auto (qui crée le contexte de formatage), mais pas la version 6. Il faudra lui adresser un correctif, via un commentaire conditionnel (voir la FAQ au sujet des commentaires conditionnels), pour conférer le layout à div#gauche, par exemple avec un width: 100%.

Laurent Denis précise la démarche pour simuler un contexte de formatage dans IE 5.x-6.

Merci Florent,

Ca marche nikel sur ie7 et firefox, par contre sous ie6 il me reste le problème suivant :

Si la div de droite est moins haute que celle de gauche le tectede la gauche passe sous la div de droite.

Ici ce que ce qui est affiché sur ie6 (pas ce que je souhaite) :


Ici rendu ie7 (parfait) :


Merci encore et d'avance

Bab