Tile images using pure CSS

I am trying to split images in a mesh system where there is no gap between them. Is it possible to do without javascript if you cannot control the order of images in the DOM?

You obviously cannot just float containers, because there will be flaws if your images do not have the same size.

http://jsfiddle.net/bzCNb/3/

.wrapper
{
    width:400px;
}

/* One grid unit */
.box1
{
    float:left;
    overflow:hidden;
    height:100px;
    width:100px;
}

/* 2x bigger than a box1, takes up 4 grid units */
.box4
{
    float:left;
    overflow:hidden;
    height:200px;
    width:200px;
}

The first three lines behave properly due to the order of the elements in the DOM.

I assume this is not possible without javascript. I hope I'm wrong. =)