[Résolu] Un problème de colonnes : contexte de formatage ?

Bonjour,

Je suis en train de mettre au point un système de grilles et de colonnes. Ma grille (que j'avais mis au point il y a déjà un moment mais que je viens de recoder en mobile-first) est terminée : Fluid Grid Layout. Elle est à la fois rigide et responsive.

Un autre système de placement, que j'ai dénommé .colomns, se démarque du premier dans le sens ou il s'agit d'un système en display:table-cell et/ou pourcentage. C'est celui-ci qui me pose problème :

J'aimerais qu'un élément enfant de .columns puisse être équivalent en largeur à deux éléments par défaut ou plus si besoin. J'ai donc créé des classes (.c2, .c3, .c4...) à apposer sur les éléments enfants concernés (classe .c2 pour 2 éléments de large, etc).

Cette solution fonctionne très bien au sein d'un formulaire (très exactement au sein de l'élément form) mais je ne peux pas reproduire ce comportement à l'intérieur d'une simple div. J'ai donc essayé de récupérer toutes les caractéristiques css de l'élément form pour les apposer sur la div... sans résultat.

Voici une page d'exemple (édit, exercice corrigé) : .columns

Si vous avez une solution je suis preneur et, d'avance, vous en remercie.
Modifié par Olivier C (02 Jun 2015 - 07:10)

Non. On pouvait effectivement se poser la question, étant donné que les inputs sont des éléments injectés. Mais j'avais déjà essayé de les remplacer par des divs (+ width:100%) : même résultat.

J'ai gardé les inputs dans le deuxième exemple afin de bien démontrer que le même code, mais pas dans le même élément parent, n'a pas le même comportement, c'est tout.

Pour le deuxième exemple, je cherche à reproduire le comportement du premier exemple à partir d'une modification de l'élément parent, ce qui me permettrait de garder la même classe .columns dans n'importe quel contexte (j'aime bien la logique OOCSS).
Modifié par Olivier C (31 May 2015 - 09:25)

Effectivement c'est assez particulier, ça serait cool d'avoir l'explication théorique de ce phénomène, Raph, si tu nous lis ^^

Ah, cool ! C'est vrai que là c'était un peu mystérieux...

Oui. À la base, il n'est pas nécessaire de définir une largeur pour les cellules d'un tableau en div.table-layout: fixed... sauf si l'on veut, comme moi, ajouter des classes proposant des règles définissant le double (ou plus) de cette largeur.