Image Positioning - html

Question

Im trying to make an image grid for a web project what I intend to do is the following.!
Image
All the boxes will be images, i need to cover 50% of the div's width and 100% of it's height [white box]. The red boxes will cover 25% of div's width and 50% of it's height. Ive tried with image postion and with table and this i what i get
Image , i want to know if theres a better way to make this. Thanks for your help and time :)
<div class="source_miu">
<table border="1">
<tr>
<th rowspan="2"><img src="http://ns223506.ovh.net/rozne/a0983fdf5e6616a0e8515ad95ef1e10e/wallpaper-664645.jpg"></th>
<td><img src="http://ns223506.ovh.net/rozne/a039b13699e8fcfd8f6c676279355546/wallpaper-357877.jpg"></td>
<td><img src="http://ns223506.ovh.net/rozne/5c5b16fd81a613372f43fdf0f89235d4/wallpaper-988986.jpg"></td>
</tr>
<tr>
<td><img src="http://ns223506.ovh.net/rozne/1ce14f71e1b760232ddb978a60ef6383/wallpaper-664196.jpg"></td>
<td><img src="http://ns223506.ovh.net/rozne/9353f6e8133cc441f096552bbdbe8ebd/wallpaper-69508.jpg"></td>
</tr>
</table>
</div>
CSS
.source_miu{
width:100%;
padding:2%;
background-color: #3c3c3c;
}
.source_miu table{
width: 100%;
}
.source_miu table{
padding: 0;
margin: 0;
width: 100%;
}
.source_miu table th{
height: 50%;
width:50%;
}
.source_miu table td{
width: 25%;
height: 50%;
}

Answer 1

This should work, fiddle.
HTML
<div class="container">
<div class="left">
<img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
</div>
<div class="right">
<img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
<img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
<img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
<img src="http://fc07.deviantart.net/fs71/f/2012/293/4/1/try_by_dranes-d5idgxw.png" />
</div>
</div>​
CSS
.container .left, .container .right
{
display: inline-block;
width: 50%;
float: left;
}
.container .left img
{
width: 100%;
}
.container .right img
{
display: inline-block;
width: 50%;
float: right;
}

Answer 2

Well you could determine the size of your pictures in pixels that way you can make sure the the 25% images are of same width and height.
50px just for the example.You can play whit it and try until you get a size that works for you.
<img src="your image.jpg" width="50px" height="50px">

Answer 3

This should also work, avoiding the use of display:inline-block; which doesn't work for IE7 or below -- doesn't matter if that doesn't matter though ;)
http://jsfiddle.net/H5npz/
markup:
<div class="panels">
<img class="a" src="/favicon.png" />
<img class="b" src="/favicon.png" />
<img class="b" src="/favicon.png" />
<img class="b" src="/favicon.png" />
<img class="b" src="/favicon.png" />
</div>
css:
.panels {
oveflow: hidden;
width: 400px;
height: 250px;
}
.panels .a, .panels .b {
float: left;
display: block;
margin: 0;
padding: 0;
}
.panels .a {
width: 50%;
height: 100%;
}
.panels .b {
width: 25%;
height: 50%;
}