Для мастеров блочной вёрстки

[Serg@NT]

Задача - сверстать следующий тулбар (серый вверху рисунка).

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

Элементы с переменной шириной (извините, неверно написал на рисунке) указаны, у остальных можно считать, что ширина фиксирована.

 

 

ЗЫ: я в итоге бросил эту затею и сверстал тулбар таблицей. Но просто интересно, вообще такое возможно блоками сверстать (без фиксированной ширины, без overflow: hidden и т.п.)?

[webmax7]

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

[Switch74]

http://jsfiddle.net/qp9kyc6j/

Edited October 23, 2014 by Switch74

[Serg@NT]

Вот же ж чёрт, а! А ларчик просто открывался.

 

Спасибо, Switch74! Лайкнуть не даёт, почему-то.

Edited October 23, 2014 by Serg@NT

[Serg@NT]

Одна проблема. Контент ниже всё равно сужается, и тулбар выезжает за границы.

[Switch74]

логично, у вас же тул бар ни как не связан с контентом наверно, а для контента у вас стоит какое-нибудь ограничение размера, 800px или еще что-то?

[Serg@NT]

  On 10/23/2014 at 9:06 AM, Switch74 said:

логично, у вас же тул бар ни как не связан с контентом наверно, а для контента у вас стоит какое-нибудь ограничение размера, 800px или еще что-то?

 

Ну да, есть min-width блока контента. Но тулбар внутри этого блока. Как заставить блок контента не сужаться меньше ширины его детей?

Edited October 23, 2014 by Serg@NT

[Switch74]

сделать его таблицей

а вообще лучше рассчитать определенный минимум и не давать родителям становиться больше него

[Serg@NT]

  On 10/24/2014 at 3:10 AM, Switch74 said:

сделать его таблицей

а вообще лучше рассчитать определенный минимум и не давать родителям становиться больше него

 

Да в том и проблема, что сайт многоязычный. И то, что в португальском занимает 200 пикселей, в корейском занимает 20. А клиент просит сужать насколько возможно.

Ладно, спасибо и на этом. Придётся остановиться на таблице.

[Switch74]

можно сделать через float еще, но там есть определенные нюансы