div grid of squares, float:left issue (image included)

Question

i am trying to make a grid in such a way that it is always the same size overall (800x600).

however, i do not want all squares in a grid to be of the same size.

as you can see as soon as i make one square bigger (2x2+gap - colored silver in the image) all the rest of the smaller squares do not realign and start from the start of the next row - creating a WHITE gap in row two.

is there a way to fix this?

here is the CSS for them:

.squareTEST1, .squareTEST2
{
    width: 60px;
    height: 60px;
    margin: 3px;
    float: left;
}

.squareTEST1A
{
    width: 126px;
    height: 126px;
    margin: 3px;
    float: left;

    background-color: Silver;
}

.squareTEST1
{
    background-color: Red;
}

.squareTEST2
{
    background-color: Blue;
}

thnx a lot for any assistance edit try it here: http://jsfiddle.net/NF9N9/

note: there may be other squares of different sizes 3x3 and 4x4, but the majority will be the 1x1 ones. just want to make a perfect grid with no gaps. it has to by dynamic, meaning any square can be blown up in any position, but in the end it should end up a compact grid.

--

unrelated (LOW PRIO) - but if anyone knows a better way to divide 800x600 grid in 12 columns 9 rows (-1 or 2 rows or columns - i can live with slightly larger squares) that ends up 800x600 and has gaps and sizes divisible by 5, i'd be grateful :P

Answer 1

Sadly you can't do this with css floats only. I know you were initially looking for a css-only solution, but I think the only way to go here is to use something like jQuery Masonry : http://masonry.desandro.com/