Cuisine et Web

! Article en partie obsolète en ce qui concerne IE.

Non, il n'y a pas de soluce universelle pour simuler des colonnes et aligner leurs contenus respectifs, mais des tas, En voici une pour le souvenir.

Aujourd'hui, nous avons flex et grid, en passe de devenir universels, mais il reste de nombreux appareils en services (tablette,télephone,..), des navigateurs obsolétes ou exotiques (ex:TV connectées), il y a aussi les applis de courriels. Les vielles méthodes restent des alternatives utiles. .

CSS mis en œuvre

• margin:auto; pour le conteneur auquel on donne une largeur.
• display:inline-block; et vertical-align pour les 2 similis colonnes
• :before, position:absolute pour les bordures centrales et l'ecart entre les deux simili-colonnes.
• linear-gradient pour les couleurs de chaque simili-colonne et l'espace entre elles

Selon les version de IE on aura toujours nos deux colonnes avec ou sans séparations.

Démonstration:

Pas de tableau ni de display:table-cell; et pour Ie7 et moins , on a 2 colonnes quand même mais on perd les bordures centrales et les 2 couleurs.

Si l'alignement vertical ne vous intéresse pas , alors float a la place de display:inline-block convient parfaitement, c'est d'ailleurs le choix mis en application comme alternative pour IE7 et inf .

Stop

Ne confondez plus table et display:table en pensant float(incapable d'alignement) en alternative , utilisez ce qu'il faut sans vous demandez si vous avez le droit d'faire ça.

Edit 2021

display : flex ou grid sont aujourd'hui très efficaces et aisés a mettre en œuvre pour créer de véritables colonnes, privilégiez leur usages.