CSS HTML organize 5 images - cross-browser compatible - html

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"/>
</div>​
CSS:
#imagesContainer {width:550px; overflow:hidden;}
.articleImage {width:180px; float:left; display:inline; margin:15px;}
.middle {margin:15px 90px;}
any suggestions?