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/

Answer 2

@Brian Flanagan (this reply was too long for a comment)

I'm using IE8, but this solution should work for older IE versions as well. Shouldn't it to be fairly simple to organize 5 pictures on a screen? :-P

I should also mention that I didn't copy and paste your solution "as is", since I didn't want my css to refer to general tags such as "img" and "div", but the changes are meaningless in terms of logic. The actual code I used:

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"/&gt;
</div>​

CSS:

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

any suggestions?