DIV по размеру контента

Question

[Paulskit]

Хочется сверстать следующую штуку. Есть блок не фиксированной ширины внутри которого размещены блоки поменьше (тайлы). При изменении окна тайлы должны переноситься, но главный блок должен всё так же оставаться на месте.
Сейчас это выглядит примерно следующим образом:
jsfiddle.net/XgErJ/59/

Хочется, чтобы при любом размере страницы блок плиток был по центру (при этом сами плитки выровнены по левому краю).
Можете что-то подсказать?

Answer 1

[Jonh Doe]

Добавьте правила
.top{ text-align:center; }
.title {text-align:left;}

Comments

[Paulskit]

Этот вариант я пробовал. Не подходит, так как и плитки внутри начинают выравниваться по центру.
jsfiddle.net/XgErJ/60/

Answer 2

[MT]

По всей видимости, подразумевается необходимость выравнивания по левому краю не содержимого каждой плитки, а самих плиток внутри центрированного блока? Тогда используйте дополнительный вложенный контейнер с display: table и margin: 0 auto (можно было бы задать display: table для существующего контейнера, но max-width не работает кроссбраузерно для табличных элементов).

См. jsfiddle.net/XgErJ/67/

Comments

[MT]

Кстати, вместо семантически безликих DIV'ов с классами здесь, возможно, были бы более уместны DL-списки:

<dl>
    <dt>Test</dt>
    <dd>Hello world!</dd>
</dl>

[Paulskit]

Почти, да немного не то. Проблема то остается. Плитки все равно выровнены немного не правильно.
Вот пример — jsfiddle.net/XgErJ/73/

[MT]

Следует задавать ширину контейнера явным образом (как сделано в моём примере) либо с помощью JavaScript (динамически определяя нужную ширину контейнера исходя из количества блоков на строке и их ширины и отступов). Согласно CSS контейнер растягивается на максимальную ширину, чтобы уместить своё содержимое. Если содержимое перенеслось на вторую строку, значит оно уже не уместилось в 100%, и контейнер его автоматически вплотную не «обтянет». Либо заключайте каждую пару внутренних блоков-плиток в отдельный блочный элемент.

[Paulskit]

Через JS хотелось бы делать в последнюю очередь. Просто не верится, что настолько простой запрос должен решаться так сложно.

Либо заключайте каждую пару внутренних блоков-плиток в отдельный блочный элемент.

Как это может помочь? Можно пример? Пару не подойдет, так как количество элементов, которые переносятся зависит от ширины окна. Или я что-то не так понял?

[MT]

Значит JS без вариантов.

Answer 3

[Softlink]

Так — jsfiddle.net/Softlink/XgErJ/68/?

Comments

[Softlink]

У .top ta:c можно убрать, jsfiddle.net/Softlink/XgErJ/69/

[Paulskit]

Та же проблема, что и с решением выше. Вот эта серая область справа — она лишняя, из-за чего элементы находятся не строго по центру.
Нужно решение, когда ширина div строго по размеру вложенных элементов. То есть ширина серого поля справа и слева — одинакова.

Answer 4

[Paulskit]

Так как начали спрашивать что же я хочу получить, показываю:
www.imagebam.com/image/5998f5231727570 (в галереи 2 изображения)
Также, набросал на WPF небольшую прогу — можно увидеть наглядно:
www.ex.ua/view_storage/768140618727