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