а если в таблицу вставлять таблицы?

сделайте не 1 блок и 4 колонки в нем, а 4 колонки и в каждой свои блоки. Тогда получится сделать чтобы блоки во 2 и 4 колонках "всплыли".

Тут дело в «резиновости». Таблицы в таблице, и «узкий» и «широкий» дивы не проканают.

Понимаете, колонок может быть сколько угодно, в зависимости от разрешения экрана — от 1-го до, ну не знаю, 8-10. Я нарисовал 4 как частный случай.

получается если я правильно понял, то если экран будет в 2 раза шире то те блоки что внизу, переместятся вверх и получатся в 1 линую с первыми 4 верхними блоками?

Да-да, вы меня правильно поняли. А если экран будет раза в полтора шире, то внизу останутся болтаться пара блоков.

Использовав ваш код увидел что получается даже не так как у вас на картинке.
При варианте что вверху будет 4 блока и внизу 4, то 5-й блок помещается не под 1-ым а под 2-ым так как первый выше и 5-й прижимается к нему с лева, а не уходит под него, ну и дальше всё повторяется...

Еслибы ячейки были одинакового размера (хотябы в высоту), то всё получлось бы идеально, а так будут такие кошмары. Или первый (или самые высокие) блок будет в 2 раза выше за остальные, а те в свою очередь в 2 раза меньше, то тогда они будут тоже нормально обтекать друг друга. А так если размеры высоты блока разные у всех, даже сложно придумать чтобы оно обтекало так как хочется.

Может быть возможно на ждаваскрипте сделать сценарий который будет позиционировать блоки именно так как нужно.

Спасибо, что тратите на меня время.

Самое смешное, нашел приблизительно то, что мне нужно, но пока не смог разобраться. Похоже, там действительно js все раскидывает (например, там position:absolute;)

Вот неужели это нельзя сделать при помощи лишь html и CSS, не прибегая к жаве?

Блоки ни как не всплывут, по сколько если ты в первой ячейке задаешь высоту 200px остальные автоматически получат 200px и не меньше. Можно создать таблицу прозрачную, а в нее дивы (в виде блоков: border:1px solid #000) и получится то что ты хочешь. И ни какого position:absolute; тут не катит такой метод, это актуально когда сайт не широкий и фиксированный.

Высота первой ячейки назначается равной высоте изображения, автоматом.

Таблицу прозрачную куда? В обертывающий див? Какие дивы в эту таблицу: с узкими картинками, широкими картинками, или все вместе (ну естественно все вместе наиболее предпочтительное решение)? Хочу подчеркнуть, что столбцов этих дивов может быть хоть сколько — от 1 до сколько влезет в ширину браузера. Резина.