J’ai récemment été confronté à un problème de CSS, lequel m’a mine de rien pris un petit bout de temps à résoudre. Comment faire prendre à un élément de type bloc la taille de son contenu (lequel pouvant varier). Il y a plusieurs solutions à cela, mais pour corser un peu le défis, j’utilisais Bootstrap, et certaines solutions n’étaient pas compatibles avec ce que je voulais. Bref, passons tout ça en revue.

En CSS il y a deux types de contenus, les contenus bloc et les contenus inline. OpenClassRoom explique très bien la différence :

block : une balise de type block sur votre page web crée automatiquement un retour à la ligne avant et après. Il suffit d’imaginer tout simplement un bloc. Votre page web sera en fait constituée d’une série de blocs les uns à la suite des autres. Mais vous verrez qu’en plus, il est possible de mettre un bloc à l’intérieur d’un autre, ce qui va augmenter considérablement nos possibilités pour créer le design de notre site !

openclassroom

inline : une balise de type inline se trouve obligatoirement à l’intérieur d’une balise block. Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l’intérieur s’écrit donc à la suite du texte précédent, sur la même ligne (c’est pour cela que l’on parle de balise « en ligne »).

openclassroom

Par définition, un block, tel qu’une div, prend toute la largeur du bloc dans lequel il se trouve. Donc si on ne lui fixe pas de taille, il prend toute la largeur disponible. Exemple ci-dessous, sans aucune définition de largeur, la div rouge prend toute la largeur :

Adapter automatiquement au contenu

Comme dit en introduction, il y a plusieurs moyens de faire s’adapter cette div à son contenu sans avoir à en préciser la largeur :

• la mettre en float,
• utiliser position: absolute,
• utiliser la propriété display: inline-block,
• définir l’élément comme inline (on perd dans ce cas les propriétés du bloc, à savoir les marges etc.

Évidemment, chaque technique a ses avantages et inconvénients. Différentes marges, positionnement dans le flux etc.

Dans le cas de Bootstrap, je voulais faire prendre la taille du contenu à un élément figure contenant une image et une balise figcaption.

Cependant, l’image étant en responsive, si je plaçais mon élément en inline-bloc, je perdais tout le bénéfice du responsive, avec comme résultat des images se chevauchant au redimensionnement car trop grandes…

Seule solution, le float, et avec Bootstrap, un petit clearfix pour que le contenu suivant ne vienne pas s’agglutiner à la suite de mon bloc. Le tour était joué.

J’espère avoir pu vous faire gagner un peu de temps !