Div en colonne à largeure 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
Code:
1
2
3
4
|
<div class=contextGauche></div>
<div class=contextDroite></div>
<div class=contextMiddle></div> |
pour le css j'ai fait un truc comme ça :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.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
