03/07/2006 : Création - Première publication. 07/07/2006 : Ajout lien pour contribution.

Nous avons donc toute la boite qui occupe toute la largeur de la colonne et l'image qu'il nous faut réduire à la taille adéquate. Calculons donc sa largeur :

Une image de 220 pixels + Un espacement intérieur de 10 pixels à droite + un autre identique à gauche + Une bordure d'un pixel à gauche + Sa petite soeur jumelle à droite, nous obtenons un total de 220 + 10 + 10 + 1 + 1 = 242 pixels.

A cet instant précis, vous vous dites, il va nous faire la démonstration que Internet Explorer ne calcul pas la longueur de la même façon et il va nous coller un : width: 242px!important; width: 220px;

C'est mal me connaître, j'ajoute seulement les 2 lignes en bleu :

01
02
03
04
05
06
07

<div style="width: 242px;">
  <div style="background-color: #D4EEFF; padding: 10px; border: 1px solid navy;">
    <img src="http://127.0.0.1/joomla108fr1/images/stories/beach_volley/bv220_1.jpg" align="center" hspace="0" alt="Le beach volley, c'est cool !" />
    <br />
    <b style="color: navy;">Le beach volley, c'est cool !</b>
  </div>
</div>

Cette solution a le mérite d'être simple, efficace et nécessaire pour la suite.
Vous devriez avoir une boite à la bonne largeur maintenant :

Le beach volley, c'est top!

Il ne reste plus qu'à centrer...