Wrap DIVs around "double height" image or pull quote - html

Question

I have a grid of image icons in a fluid layout. The icons are broken up by a couple of double-height images. I would like to have the icons wrap around the double height images. For example, if the double height image is the first in the row, the rest of the icons fill the rest of the row, then wrap down and fill in next to the double height image and complete the next row.
If I just put them all in a list together, what happens is that once the row is filled in, it wraps below the double height image, effectively leaving a big white space to the right of the double height image.
The other double height image is the seventh item in the list (the first double height image, then 5 single height icons, then the next double height image). I would like the single height images to wrap around this one as well without leaving a blank row on the bottom right of the image. Ideally, I'd like to stick this image on the right, but wasn't able to get that to work.
You can see the page here:
http://www.kandlekidswear.com/Pages/designs.html
Right now, my workaround is that I have put two single height divs within a double height divs, so the list is effectively a list of double-height divs. It is working ok, but the issue is that it leaves a large two-row white space at the bottom right. I would welcome an alternate approach. Thanks in advance!
CSS
.singleHeight {
width: 180px;
height: 180px;
float: left;
margin: 10px;
}
.doubleHeight {
width: 200px;
height: 400px;
float: left;
margin: 5px;
}
HTML
<div class="doubleHeight">
<img src="doubleHeightImage1.jpg">
</div>
<div class="doubleHeight">
<div class="singleHeight"><img src="icon1.gif"></div>
<div class="singleHeight"><img src="icon2.gif"></div>
</div>
<div class="doubleHeight">
<div class="singleHeight"><img src="icon3.gif"></div>
<div class="singleHeight"><img src="icon4.gif"></div>
</div>
...
<div class="doubleHeight">
<img src="doubleHeightImage2.jpg">
</div>
<div class="doubleHeight">
<div class="singleHeight"><img src="icon5.gif"></div>
<div class="singleHeight"><img src="icon6.gif"></div>
</div>
...