Почему inline-block'и не размещаются в одну строку?

Question

[prosto_anton]

В блоке main два div'a со значением display: inline-block, которые прекрасно размещаются рядом, а когда места в контейнере становится недостаточно, размещаются один под другим. Тут все нормально.

Но в одном из этих div'ов есть еще несколько элементов inline-block, которые упорно не желают размещаться в одну строку, хотя места предостаточно.

Я только учусь верстать, не швыряйте помидорами, пожалуйста. Спасибо за советы.
FF последней версии.

P.S.: не использую флот (с которым все правильно работает, кстати), потому что хочу расположить элементы по центру, сколько бы их не было. Да и проблему хочу понять.

Answer 1

[Назар Мокринский]

Для начала зайдите на JSfiddle и сделайте пример, который будет воспроизводить проблему. Вот тогда можно будет подумать о решении.

Comments

[prosto_anton]

Большое спасибо за ответ, вот мой пример jsfiddle.net/Hs6PL Странно, что на сайте все работает как надо, а на компе -- нет.

[prosto_anton]

Проблема, видимо, не в css, а в формировании страницы на клиенте. Спасибо за участие.

Answer 2

[Ильдар Сарибжанов]

Судя по вашему описанию, верстка представляет из себя вот такую структуру jsfiddle.net/5aMNp/1/.
Что я сделал не так? Или если я не прав, исправьте мой вариант

Comments

[prosto_anton]

Большое спасибо за ваш ответ! Вот мой вариант: с моими стилями и структурой jsfiddle.net/Hs6PL На этом сайте все работает как мне надо, на локалке -- как я описал.

[prosto_anton]

Проблема, видимо, не в css, а в формировании страницы на клиенте. Спасибо за участие.

Answer 3

[Константин]

Подозреваю, что нужно убрать пробелы между тегами: jsfiddle.net/sc0rp10/Bqhcv/1

Comments

[prosto_anton]

Большое спасибо за ответ! Все элементы страницы создаются с помощью JS на клиенте, там не должно быть пробелов. Может, в этом как раз и дело...

[prosto_anton]

Но почему тогда работает в первом случае? :-)

[prosto_anton]

Проблема, видимо, не в css, а в формировании страницы на клиенте. Спасибо за участие.

Answer 4

[Тимур Бикташев]

Как вариант, можно использовать display: table для родительских блоков и display: table-cell для дочерних. Конечно, будут проблемы с IE.

Comments

[prosto_anton]

Спасибо вам за совет! Как не стыдно признавать, проблема была в js коде :-)