Okay, so I'm trying to align 4 images on my Zen Cart home page. There is one large image to the left and I want the other 3 images to display down the right side.

I'm using the float and clear statements which I thought would do the trick, but does not seem to be working.

The link to my site is: http://www.tregreekboutique.com/zencart.

Any suggestions would be greatly appreciated!!

Here is the code being used:

<STYLE type = "text/css">

img.floatLeft {
float: left;
margin: 0px;
}

img.floatright {
float: right;
clear: both;
}

img.floatRightClear {
float: right;
clear: right;
}
</style>

<img style="width: 660px; height: 550px;
"src="http://tregreekboutique.com/zencart/images/Main_Banner1.JPG" alt="Main Banner" class="floatleft" />

<img style="width: 280px; height: 180px;" src="http://tregreekboutique.com/zencart/images/storefront.JPG" alt="Tre Greek Storefront" class="floatrightclear" /><br>

<img style="width: 280px; height: 180px;" src="http://tregreekboutique.com/zencart/images/event.JPG" alt="Event Flyer" class="floatrightclear" /><br>

<img style="width: 280px; height: 180px;" src="http://tregreekboutique.com/zencart/images/Tre_Bag.JPG" alt="Tre Greek Shopping Bag" class="floatrightclear" />