CSS HTML organize 5 images - cross-browser compatible

Question

I've got 5 images I'd like to organize in an ASP.NET MVC view. So what I need is an HTML+CSS solution (I prefer not to use jQuery for this, for maximal compatibility).

I want to organize the images like so:

  Image1           Image2

  Image3           Image4

           Image5

At first I tried using tables, with the HTML being:

<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> 

and the css part:

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

but that doesn't work on IE.

This approach also didn't work too well either.

What is the best, simplest, cross-browser way to carry out what would seem to be an easy task?

Answer 1

How about this: http://jsfiddle.net/um6d7/