Проблема в следующем: необходимо расположить div'ы (именно блоковые элементы) так, чтобы они шли один за другим без переносов на следующую строку. Перенос появляется тогда, когда в ряду заканчивается место. При этом строки с div'ами должны располагаться по центру.

Делаю всем div'ам float: left, но при этом их не расположить по центру.

Инлайнами их делать нельзя, так как при этом не выставить размер div'a.
Таблицу ставить нельзя, так как тогда по горизонтали всегда одинаковое количество ячеек, а смысл в том, чтобы их количество зависело от разрешения.
Можно вставить все div'ы в какой-либо контейнер, но пока они float, это бесполезно.

Вот пример страницы: http://zero.kanet.ru/test/index.html.
Вот код:


Вот CSS:

Может их всех "обернуть" в еще один div, выравнивание которого уже установлено на центр?

Официально эта задача, насколько мне известно, считается нерешаемой. Но... если очень захотеть...

Не выйдет, так как они float.



А если не секрет, что такое

?
Вариант с хаками использовать не желательно, так как сейчас работает, а потом перестанет... Возможно же такое.

Кстати, тут же возникает проблема - те дивы, что на последней строке, если их не достаточно для комплектования полной строки, хорошо бы расположить по левому краю относительно начала ряда.

Понимаю, что задача сложная, но неужели никому еще этого не требовалось? Может, кто-нибудь знает сайт, где это реализовано?

Насколько я понимаю, это мозилловское проприетарное (пока что) расширение, некий (отдаленный) аналог "мелкомягких" behaviors. "Внутри себя" более-менее стандартизовано, так что отменить его вряд ли отменят. Так что я бы не назвал это хаком, скорее это "специфические возможности" (равно как и conditional comments в IE). Единственная проблема - в прочих браузерах, не имеющих родной поддержки inline-block (как в Опере) и "спецсредств" (IE, Gecko) будет "некузяво". Но сколько их, браузеров помимо этой "большой тройки"?..


Боюсь, что это действительно невозможно...

Ну нет так нет... Просто так как есть, жутко некрасиво. Надо как-нибудь переделать, чтобы хорошо смотрелось выровненным по левому краю.

Ладно, все равно спасибо.

Непонятна постановка: при каких условиях должно уменьшаться количество блоков в строке? При одних условиях - переносы на новую строку, а при других перенос блока. Как сформулируете условия, тут же можно сделать таблицей и скриптом, меняющим количество блоков в строке.

Если судить по ссылке в 1-м посте, то надо делать "ноготки", как в ACDSee и прочих просмотрщиках. Так где проблема? Когда определяете ширину окна и ячейки, можете генерировать таблицу с нужным числом ячеек по горизонтали. При ресайзе - перестроить (будут некие задержки, но заново переписывать блоки не надо, просто переставить узлы).

Если правильно понята задача, задавайте вопросы в раздел "JS".

Хотелось бы через CSS. Не хочу усложнять и замедлять JavaScript'ом страницу, если это не жизненно необходимо.

Ты все правильно сказал, спасибо. Но я хотел найти решение на CSS и без таблиц. JavaScript'ом не обязательно генерировать таблицу, можно просто расположить div'ы. А при изменении размеров окна перераспределить их.

[offtopic]
В Вилларибо и Виллабаджо опять дедлайн. Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и мочат друг друга в квейк.

В Веларибо и Вилабаджо снова праздник! Заказчик захотел версию для PDA и пока ребята из Вилабаджо думают, а что это вообще за фигня и как жить дальше, ребята из Виларибо правят десять строк CSS-а и мочат в квейк.
[/offtopic]
  

Вообще, если таки применять JS, то все элементарно: обычные плавающие блоки в контейнере, которому по onload и onresize окна присваивается 

P.S. конечно же левый margin, если блоки "плавают" влево - видно, вчера сонный был... исправил.

Это сообщение отредактировал(а) SelenIT - 15.3.2007, 01:38

Спасибо за код, потом попробую.

.sidebar1 {
    float: left;
    width: 180px;
    background-color: #ffffff;
    padding-bottom: 10px;
    padding: 10px 0;
}
.content {

    padding: 10px 0;
    width: 620px;
    float: left;
}
.sidebar2 {
    float: right;
    width: 180px;
    background-color: #ffffff;
    padding: 10px 0;
}


И всё) Дивы идут друг за другом))

pandari, очень своевременный ответ, всего-то 6 лет прошло