Question

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

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 (2×2+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 3×3 and 4×4, but the majority will be the 1×1 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 800×600 grid in 12 columns 9 rows (-1 or 2 rows or columns – i can live with slightly larger squares) that ends up 800×600 and has gaps and sizes divisible by 5, i’d be grateful 😛

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/