Centrer Jonathan

Eclater la Différence

Une autre mise en page typiquement résolue avec les tableaux est complètement à l'opposé de ce que nous avons réalisé avec les mises en page de formulaires. Au lieu de rencontrer le milieu, vous pourriez désirer placer deux éléments sur les bords opposés de la fenêtre du navigateur. Ce pourrait être le cas si vous avez un petit logo que vous voulez placer en haut dans le coin à droite de votre page, et quelques éléments de navigations en haut à gauche :

Ici nous utiliserons les DIVs pour aligner les choses sur chaque bord de la DIV contenante. La DIV sur la gauche flottera à gauche et contiendra le texte aligné à gauche. La DIV sur la droite flottera à droite et contiendra le texte aligné à droite. La raison d'utilisation des DIVs est que ce sont des éléments de niveau bloc, ainsi si la CSS est déconnectée ou indisponible, les DIVs s'aligneront au dessus de chacune d'elles, plutôt que l'une à la suite de l'autre.

CSS:

.left {
  float: left;
  text-align: left;
  font-weight: bold;
  color: #fff;
  width: 49%;
  }

.right {
  float: right;
  text-align: right;
  font-weight: bold;
  color: #fff;
  width: 49%;
  }

HTML:

<div style= "width: 350px; background-color: #666;
border: 1px solid #333; padding: 0px; margin: 0px
auto;">

<div class="left">
Home &gt; Products</div>
<div class="right">
[logo]</div>

<div class="spacer"></div>

</div>

A quoi sert la div class="spacer" ici ? Quand vous faites flotter un élément avec CSS, il ne prend plus "d'espace" et n'importe quel arrière-plan et/ou bordure apparaîtra au dessus des immages au lieu de les entourer. Nous avons besoin d'ajouter du contenu différent autre que des DIVs flottantes à l'intérieur du conteneur DIV pour forcer l'arrière-plan ou l'encadrer afin de contenir ainsi les éléments flottants. Ajoutez cela à votre feuille de style pour vous soucier de cela :

div.spacer {
  clear: both;
  }

Mark Newhouse - Lien original de référence. Traduction Christophe Ducamp