fausses colonnes avec inline-block et linear gradient

Attention, troll en embuscade !

Nop, juste pour dire qu'il n'y a pas de soluce universelle pour simuler des colonnes et aligner leurs contenus respectifs.

CSS mis en œuvre

  • margin:auto; pour le conteneur
  • 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:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus tellus. Nam tristique neque in arcu vestibulum a egestas massa rutrum. Suspendisse dictum pharetra tortor, quis commodo purus semper viverra. Donec imperdiet, ligula in posuere tempor, sapien ante rhoncus nibh, eget placerat tellus dolor tristique neque. Donec et libero non nibh blandit congue. Suspendisse potenti. Integer ac urna augue, in fermentum massa. Vestibulum vel enim vitae arcu imperdiet auctor vitae at ante. Nulla et massa mi. Aliquam a enim eros, ut ultricies enim. Pellentesque in lectus quis diam pellentesque adipiscing. Aliquam in dui a elit tincidunt lacinia nec sed eros. Donec condimentum libero ac massa venenatis vulputate.
Phasellus ligula felis, venenatis mollis porta suscipit, ultrices et odio. Sed eget sem nec odio venenatis tempus. Curabitur accumsan viverra libero, eu egestas elit convallis at. Nullam quis est non metus hendrerit faucibus. Praesent euismod elementum nunc, quis interdum erat egestas non. Phasellus condimentum pharetra mi, nec condimentum ligula iaculis vitae.

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 2couleurs.

Si l'alignement vertical ne vous interesse 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

Arrêtez de confondre table ou display ou float , utilisez donc ce que vous pouvez quand il faut .

Ecrire un commentaire




Quelle est la quatrième lettre du mot dyurht ?