Cliquez sur les exemples de code CSS pour voir le résultat appliqué à la colonne de droite ou l'un de ses éléments contenus.
Pour l'alignement des textes, voir le chapitre CSS 2 > Les textes.
Centrer en utilisant le calcul automatique des marges | |
<style type="text/css"> #div1 { width: 50%; background-color: #C3D9FF; padding: 15px; margin-right: auto; margin-left: auto; } </style> <div id="div1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna enim, posuere ut porttitor sit amet, eleifend quis leo. Aenean semper sapien quis mi mattis at venenatis est feugiat. </div> |
|
Aligner à droite en utilisant une position absolue | |
<style type="text/css"> #div2 { width: 50%; background-color: #C3D9FF; padding: 15px; position: absolute; right: 0; } </style> <div id="div2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna enim, posuere ut porttitor sit amet, eleifend quis leo. Aenean semper sapien quis mi mattis at venenatis est feugiat. </div> |
|
Aligner à droite en utilisant la propriété float | |
<style type="text/css"> #div3 { width: 50%; background-color: #C3D9FF; padding: 15px; float: right; } </style> <div id="div3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna enim, posuere ut porttitor sit amet, eleifend quis leo. Aenean semper sapien quis mi mattis at venenatis est feugiat. </div> |
2011 - Sylvain Boureliou - sylvain.boureliou@gmail.com - www.boureliou.com