CSS : remplir le contenu d’une div de manière fluide

J’ai récemment été confonté à un problème lors de la réécriture du code CSS d’un formulaire Gravity Form : on voulait que le contenu remplisse la div, sans sauter de ligne lorsqu’il n’y en avait pas besoin.

Je pensais naïvement qu’un simple float:none et une largeur à 100% suffiraient :

.gfield_label {
   float: none !important;
   width: 100% !important;
}Code language: CSS (css)

Mais cela a fini par chambouler tous les champs de formulaires : labels et champs n’étaient plus sur la même ligne.

La solution est toute simple mais cela m’a pris un temps fou à la trouver – il suffit d’ajouter un clear:both au bloc parent qui contient l’élément que l’on veut fluidifier, comme ceci :

/* Make it flow */
li#field_11_10 { clear: both !important; }
Code language: CSS (css)

En espérant que cela puisse vous faire gagner du temps !

Des obstacles techniques ? Je trouve des solutions sur-mesure pour que votre site WordPress/WooCommerce fonctionne sans accroc.

Contactez-moi pour un diagnostic gratuit »

Matt

Développeur certifié WordPress & WooCommerce chez Codeable, administrateur système et enseignant-chercheur, je mets mon expertise au service de vos projets web.

Ma priorité : des sites performants, fiables et sécurisés, pensés pour offrir la meilleure expérience utilisateur. J’accompagne chaque client avec écoute et pédagogie, pour transformer vos idées en solutions concrètes et durables.

Profitez de solutions WordPress et WooCommerce sur-mesure, pensées pour optimiser durablement votre site.
Explorez les leviers pour booster l’impact de votre site web.

Opinions