[Résolu] Div flottant à largeur variable

Bonjour,

Cela fais un moment que je vous lis, et je dois dire que ce site m'a deja beaucoup aidé. Merci.

Par contre la, j'ai du mal a trouver par moi-même.

Le probleme :
J'ai trois div flottant tous a gauche.
Le premier (menu gauche) / Le second (article) / Le troisième (menu a droite)

Le troisième n'apparait pas tout le temp, et j'aimerai que lorsqu'il ne soit pas la, mon second div (article) prenne l'espace disponible.

Code explicatif :

#content {
	margin-right: auto; 
	margin-left: auto;
	width: 1000px;
	margin-top: 0px;
}

#menuGauche {
float:left;
margin-bottom:20px;
margin-left:20px;
margin-right:50px;
width:210px;
}

#contenu {
float:left;
margin-bottom:20px;
width:380px;
}

#menuDroite {
float:right;
margin-bottom:20px;
margin-left:50px;
margin-right:20px;
width:210px;
}

<div id="content">
  <div id="menuGauche">
  </div>
  <div id="contenu">
  </div>
  <div id="menuDroite">
  </div>
</div>

Merci d'avance pour votre aide.

Cordialement,
Peter
Modifié par PeterBlack (05 Aug 2009 - 12:36)

Bonjour,

Pour faire ce que tu souhaites, il va falloir modifier légèrement la structure de ta page HTML :

<div id="content">
   <div id="menuGauche"></div>
   <div id="menuDroite"></div>
   <div id="contenu"></div>
</div> 

Ainsi, on va pouvoir rendre menuDroite flottant à droite et contenu n'aura plus besoin d'être flottant et pourra donc prendre la place disponible :

#content {
  margin-right: auto;
  margin-left: auto;
  width: 1000px;
  margin-top: 0px; 
}
#menuGauche {
  float:left; margin-bottom:20px;
  margin-left:20px;
  margin-right:50px;
  width:210px; }
#contenu {
  margin-bottom:20px;
  margin-left: 260px; /*Pour que le contenu ne se mette pas sous le menu s'il est plus long, il faudrait normalement ajouter une marge à droite de la même façon, suivant que menu droit est présent ou pas (tu peux le faire au cas par cas avec du JS ou du PHP (ou directement dans la page))*/
}
#menuDroite {
  float:right;
  margin-bottom:20px;
  margin-left:50px;
  margin-right:20px;
  width:210px; 
} 

a écrit :
Pour que le contenu ne se mette pas sous le menu s'il est plus long, il faudrait normalement ajouter une marge à droite de la même façon, suivant que menu droit est présent ou pas (tu peux le faire au cas par cas avec du JS ou du PHP (ou directement dans la page))

J'avais penser à cette façon de faire aussi seulement je voulais gérer ça qu'en CSS. Ça n'a pas l'air faisable on dirait.

En utilisant un langage tiers, j'aurai simplement pu influer que sur le width du div #contenu pour obtenir ce que je voulais. Je pense que c'est la solution pour laquelle je vais opter si pas moyen de faire ça en CSS.

Je te remercie pour ta réponse rapide.

Cordialement,
Peter

La solution la plus propre en CSS est si tu sais prévoir que le bloc de droit sera présent ou non est de mettre une classe à #contenu pour faire varier la taille.

Laurie-Anne a écrit :
La solution la plus propre en CSS est si tu sais prévoir que le bloc de droit sera présent ou non est de mettre une classe à #contenu pour faire varier la taille.

Oui. Je ferai ça certainement.
Merci beaucoup, je met le sujet en résolu.

Bonjour,

C'est possible assez simplement en CSS, avec un contexte de formatage.

<div id="gauche"></div>
<div id="droite"></div>
<div id="centre"></div>

#gauche {
  float: left;
  width: 200px;
  margin-right: 20px;
  background: red;
}
#droite {
  float: right;
  width: 180px;
  margin-left: 20px;
  background: green;
}
#centre {
  overflow: hidden; /* Contexte de formatage */
  zoom: 1; /* HasLayout, émule un contexte de formatage dans IE6 */
  background: blue;
}

La contrainte ici est que div#droite doit être placé en amont dans le code HTML, ce qui n'est pas forcément très logique. Mais pour peu que les contenus soient suffisamment indépendants, ça ne pose pas de problème d'accessibilité.
Modifié par Florent V. (05 Aug 2009 - 14:29)