CSS HTML organiser 5 images - cross-navigateur compatible

Question

J'ai 5 images que je voudrais organiser dans une vue ASP.NET MVC. Donc j'ai besoin d'une solution HTML + CSS (je préfère ne pas utiliser jQuery pour cela, pour une compatibilité maximale).

Je veux organiser les images comme ceci:

Image1   Image2 

    Image3   Image4 

      Image5 

Au début, j'ai essayé d'utiliser des tables, avec l'être HTML:

<div class="table1"> 
    <table border=1> 
     <tbody> 
     <tr> 
      <td> 
       <img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Body.Contouring.jpg" /> 
      </td> 
      <td> 
      <p class="ImageCenterContainer"> 
       <img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Breast.jpg" /> 
      </p> 
      </td> 
     </tr> 
     </tbody> 
    </table>    
    </div>      
    <div class="table2"> 
    <table border=1> 
     <tbody> 
     <tr> 
      <td> 
      <p class="ImageCenterContainer"> 
       <img class="mainArticleImage" src="../../images/fixedImages/dr_teman_Articles_Skin.jpg" /> 
      </p> 
      </td> 
      <td> 
      <p class="ImageCenterContainer"> 
       <img class="mainArticleImage" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" /> 
      </p> 
      </td> 
     </tr> 
     </tbody> 
    </table>    
    </div> 
    <div class="table3"> 
    <table border=5> 
     <tbody> 
     <tr> 
      <td> 
      <p class="ImageCenterContainer"> 
       <img class="mainArticleImage" alt="" src="../../images/fixedImages/Dr_teman_Articles_Face.jpg" /> 
      </p> 
      </td> 
     </tr> 
     </tbody> 
    </table>    
</div> 

et la partie css:

.mainArticleImage {  
    height: 95px; 
    width: 120px; 
} 
.ImageCenterContainer { 
    margin: 0 auto; 
    margin-top:0px; 
    margin-bottom:0px; 
    padding:0px; 
    text-align:center; 
} 

mais cela ne fonctionne pas sur IE.

This approach aussi ne fonctionnait pas trop bien non plus.

Quel est le meilleur, le plus simple, navigateur croisé manière d'effectuer ce qui semblerait être une tâche facile?

Answer 1

Que diriez-vous ceci: http://jsfiddle.net/um6d7/

Answer 2

@Brian Flanagan (cette réponse est trop long pour un commentaire)

J'utilise IE8, mais cette solution devrait fonctionner pour les anciennes versions IE ainsi. Ne devrait-il pas être assez simple d'organiser 5 photos sur un écran? :-P

Je dois également mentionner que je n'ai pas copié et collé votre solution "telle quelle", puisque je ne voulais pas que mes css se réfèrent à des balises générales telles que img et div, mais les changements sont insignifiants en termes de logique. Le code actuel j'ai utilisé:

HTML:

<div id="imagesContainer"> 
    <img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" /> 
    <img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" /> 
    <img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" /> 
    <img class="articleImage" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG" /> 
    <img class="articleImage middle" src="http://upload.wikimedia.org/wikipedia/commons/1/18/Ocellaris_clownfish.JPG"/> 
</div>​ 

CSS:

#imagesContainer {width:550px; overflow:hidden;} 
.articleImage {width:180px; float:left; display:inline; margin:15px;} 
.middle {margin:15px 90px;} 

des suggestions?