[Résolu] Bloc fluide avec fond perdu à gauche

Holà les Alsacréateurs !

Tous voeux aux membres de ce forum, je vous souhaite un belle année 2016 pleine de flex-box !

J'essaye de mettre en place un bloc fluide avec un fond perdu à gauche. Cela fonctionne plutôt bien :
http://codepen.io/dasys/pen/rxmjPe

Je voulais savoir si je pouvais "l'optimiser" et le rendre plus flexible, par exemple en remplaçant le height et le line-height, qui me permet d'avoir la même taille sur mes deux éléments, par un padding qui serait hérité automatiquement ?

D'avance mille mercis pour vos avis.

Bien à vous.

Bonjour,

Supposons que tu veuilles un padding de 1em. Dans le css de .ct, tu remplaces height:50px; et line-height:50px; par :

position:relative;
padding:1em;

Et dans .ct:after, tu remplaces margin-left: -50%; par :

position:absolute;
top:0;
bottom:0;
left:-50%;

Le position:relative dans .ct permet de faire fonctionner le position:absolute dans .ct:after. Le left:-50%; dans .ct:after remplace l'effet précédemment obtenu par le margin-left: -50%;. Enfin, top:0; et bottom:0 permettent de rendre la hauteur du .ct:after parfaitement identique à celle de .ct (c'est la clé du truc).

Tu peux aussi retirer le height:inherit dans .ct:after du coup.

EDIT : tu peux aussi retirer le float:left dans .ct:after.

Un petit miracle que ça marche quand même. A tester dans la vraie vie.

Amicalement,
Modifié par parsimonhi (08 Jan 2016 - 20:17)

Bonjour parsimonhi,

Et mille mercis pour ta brillante solution et tes explications limpide : cela fonctionne à merveille !

J'ai fait un fork avec ta solution si cela peut aider quelqu'un d'autre :
http://codepen.io/dasys/pen/LGLxwy

Encore merci