CSS > Méthodes d'alignement des éléments de type bloc

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>

Place à la pratique :

 
THIS CONTENT WILL BE REPLACED BY INTERPRETED HTML TAPED IN THE "code" TEXTAREA

2011 - Sylvain Boureliou - sylvain.boureliou@gmail.com - www.boureliou.com