[résolu] Menu "dynamique" à gauche : float et overflow

Bonjour à tous.

J'ai encore un soucis de CSS et je ne trouve pas de solution dans le forum.

J'aimerai créé un menu "dynamique" : une div qui s'affiche (ou pas) à gauche de ma page et qui pousserai mon contenu vers la droite si elle est affichée.

J'ai crée une div body_container qui contient mes deux div : menu_container et content_container. Par défaut la div menu_container n'est pas affichée mais un ptit lien en js permet de l'afficher. Mon body_container fait 100% en width et j'ai juste appliqué un float: left à mon menu.

Le hic c'est qu'entre IE et FF, mon overflow du content_container n'agit pas de la même manière.

Sous IE :


Sous FF:


Le CSS :

#body_container {
	background: red;
	width: 100%;
	overflow: auto;
}
#menu_container {
	width: 175px;
	background: yellow;
	float: left;
}
#content_container {
	background: green;
	overflow: auto;
}

Le HTML :

<div id="body_container">
	<div id="menu_container">
		gauche<br/>
		gauche<br/>
		gauche
	</div>
	<div id="content_container">
		contenu<br/>
		contenu<br/>
		contenu<br/>
		contenu<br/>
		contenu<br/>
		contenu<br/>
		contenu<br/>
		contenu
	</div>
</div>

Je pense qu'il me manque juste une propriété CSS mais j'ai beau chercher, je vois pas laquelle... J'ai cherché du côté de clear nottament. Et je peux pas jouer sur les histoires de marges vu que mon menu n'est pas forcément affiché.

Merci si vous avez une piste.
Modifié par vielos (28 Apr 2006 - 14:22)

Bon, il semblerait que le overflow: auto; fasse que Firefox empêche le bloc de contenu de passer sous le menu flottant (ce qui serait son comportement par défaut). Mais que ça ne prenne pas avec IE.

Il me semble que dans IE, le fait de conférer le layout à ton bloc de contenu crée le même comportement. Le plus souvent, ça se passe quand on donne une hauteur ou largeur fixe à ce bloc, mais là ça me semble exclus.

Tu peux utiliser la propriété CSS non standard zoom pour conférer le layout à ton bloc de contenu. Par contre, tu risques d'avoir un décalage de 3px entre le menu et le bloc de contenu (Three Pixel Jog). S'ils ne sont pas censés être collés, ça peut aller.

#content_container {
	overflow: auto;
	zoom: 1;
}

Si ça ne convient pas, il reste la solution suivante : virer le overflow auto, et donner une marge à gauche au bloc de contenu de la largeur du menu (ici, 175px). Si on ne peut pas le faire directement dans la feuille de style, on peut le faire en Javascript lors de l'affichage du menu.

Ah effectivement bien vu!
Merci beaucoup mpop ca me va