Div en colonne à largeur variable

Bonjour,

Voici le contexte :

j'ai 3 div contenu dans une autre div
Les 3 div sont positionné de tel sorte qu'elle soient sur la même ligne. Elles forment donc 3 colonnes.

Pour positionner ces div j'ai fait ainsi

<div class=contextGauche></div>
<div class=contextDroite></div>
<div class=contextMiddle></div>

pour le css j'ai fait un truc comme ça :

.contextGauche
{
    float: left;
}
.contextDroite
{
    float: right;
}
.contextMiddle
{
    overflow: hidden;
}

Les bouts de code ici sont simplifiés, je vous ai épargné les margin et autre padding qui n'apporte pas grand chose, je pense, à la problématique.

Les 3 div se positionne correctement mais le problème que je doit surmonté est plus complexe.

Maintenant que j'ai placé mes div je dois réussir avec les CSS uniquement à produire la spec suivante :

si 1 seule div est remplie, elle doit prendre toute la largeur de la div conteneur
si deux div sont remplies, elles doivent prendre toute la largeur de la div conteneur et avoir la même largeur (50% de la div conteneur chacune en gros)
si les 3 sont remplies, elles doivent prendre toute la largeur de la div conteneur et avoir la même largeur (33% de la div conteneur chacun en gros).

Le mecanisme du framework utilisé à l'avantage de passer les div vides de ce context en display:none.

Actuellement si les 3 div sont remplies, la div de droite à une largeur équivalente à son contenu ce qui ne convient pas. Si cette div ne contient qu'un caractère par exemple, elle aura la largeur de cette unique caractère et la div du milieu prendra toute la largeur qui reste entre la div de gauche et la div de droite.

Je pense que celà doit être faisable en CSS, mais aprés avoir chercher durant toute la journée d'aujourd'hui je me tourne vers la communauté

Cordialement

Bonjour,

La première propriété qui me vient à l'esprit est "min-width" / "max-width".

Maintenant quant à son utilisation pour obtenir l'effet voulu, j'avoue que je ne vois pas tout à fait... il y a beaucoup de cas de figure à gérer à la fois. Et cela ne m'étonnerait pas si cette seule propriété ne suffisait pas.

Peut-être une piste à explorer... Bon courage !

Salut,

pour moi, ça ressemble fort à une gestion dynamique du contenu. Je m'explique : selon les <div> présentes ou non, le design n'est pas le même (une colonne, deux colonnes, ou trois colonnes) ...

Qui dit "dynamique" dit usage de langages dynamiques. Or, le CSS n'est pas fait pour ça, il ne gère pas d'instructions conditionnelles ...

Je me tournerais donc soit :
- vers ton framework, pour placer des classes qui vont bien sur tes <div> lors du moulinage de ta page (si j'ai que 2 colonnes, je mets des classes 2cols, etc)
- vers JavaScript pour gérer dynamiquement les colonnes (si la longueur du contenu de ma colonne 3 vaut '0' - y'a rien dedans quoi -, alors les deux autres ont une largeur de 50%, etc)

Mais en CSS pur, ça me semble compliqué comme ça ...

Pour la petite info, le "framework" est basé sur GWT.

Juste pour dire que pour le moment j'ai plus ou moins résolu ma problématique en rajoutant un width:33% sur la div de droite. Pas trés élégant ... mais bon

Je reste à l'écoute dans le cas d'une petite solution que je n'aurais pas vu.

Merci de vos retour en tout cas, le forum de Alsacréation est actif et c'est plaisant