Coothead, quick update before heading off for the night - have edited the HTML to include my website's choice of images (plain white just now for placement, will be replacing the filenames with better images soon! Have customised the heights of the row of 2 and the row of 3, and changed the outer container border to black.

Now, just the margin/padding between the images. I'm guessing "padding:5px;" but have no idea where to put it. Tried it in a couple of places, just kept messing up the formatting!

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Magz Boutique - Glasgow's best shopping secret</title>

<style>
body {
    background-color:#000;
 }
#container {
    border:1px solid #000;
 }
.two {
    height:356px;
 }
 .three {
    height:296px;
 }
.two {
    margin-bottom:10px;
 }
.two img {
    float:left;
    width:50%;
    height:100%;
 }
.three img {
    float:left;
    width:33.33%;
    height:100%;
 }
</style>

</head>
<body>

<div id="container">

<div class="two">
  <a href="http://www.magzboutique.com/"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/fronttop1_zpsc7c1f06e.jpg" alt=""></a>
  <a href="http://www.magzboutique.com/glasgow-local-delivery"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/fronttop2_zps2fed01cc.jpg" alt=""></a>
</div>
<div class="three">
  <a href="http://www.magzboutique.com/category/Bags"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/frontbtm1_zps17c84416.jpg" alt=""></a>
  <a href="http://www.magzboutique.com/category/Jewellery"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/frontbtm2_zpse0342426.jpg" alt=""></a>
  <a href="http://www.magzboutique.com/category/Scarves"><img src="http://i869.photobucket.com/albums/ab256/magzboutique/frontbtm3_zps8eaae283.jpg" alt=""></a>
</div>

</div><!-- end #container -->
<hr color="#000000">
</body>
</html>