Как реализовать две резиновые колонки, одна из которых зависит от контента второй по ширине?

Question

[Artem Maximum]

Здравствуйте, появилась следующая проблема, на которую я не смог найти ответ, поэтому хочу спросить совета у опытных людей.
Существует контейнер для двух блоков первый из которых search блок #1 а второй блок для иконок #2.
необхоимо сделать верстку с расчетом на то, что если во втором блоке будут уменьшаться или прибавляться количество иконок, первый блок автоматически регулировал бы свою ширину.



Если кто знает как это реализуется, помогите советом пожалуйста. Если это возможно, желательно кроссбраузерное решение.
Заранее благодарен

Answer 1

[Михаил Чирский]

Вот пример
Попробуйте добавить иконки, чтобы увидеть результат

Comments

[Artem Maximum]

Большое спасибо за предоставленный пример реализации, не могли бы вы объяснить, какую роль тут играет overflow:hidden? Попробую использовать данный пример в проекте, однако не отказался бы просмотреть другие примеры реализации данной задачи. Еще раз спасибо за решение.

[Михаил Чирский]

overflow: hidden; в данном примере выступает в роли растягивания контейнера, то есть он занимает всю оставшийся ширину, ну гл. чтобы не был нарушен порядок. Очень хорошо, когда значения в % или динамические, то решает все проблемы) ну есть один минус.
Если вам нужно будет сделать какой то tooltip или что то выпадающее за пределы, вы не увидите, т.к элемент будет обрезан, я в таких случаях решал проблемы, добавлением элемента в DOM и ловил его через offset, вообщем если будут вопросы пишите, помогу, чем смогу.

[Владислав Старцев]

Михаил Чирский: судя по вашему примеру overflow: hidden в one.{} вообще не нужен, и не нужен width: в .two{}, по крайней мере у меня норм встает и без этого

[Михаил Чирский]

Владислав Старцев: width: нужен для того, чтобы если было иконок меньше, ширина была минимальной, только для этой цели, потому, что если у вас не будет не 1 иконки 2 блока не будет в принципе, то есть просто обезопасились заранее) а по поводу overflow: hidden; я точно не помню, ну в старых браузерах, без него не работало, поэтому взял на заметку писать себе) можно сказать привычка)

Answer 2

[Александр]

display:table для родителя, а потом display:table-cell с фиксированной шириной для одной из колонок

Comments

[Artem Maximum]

Александр, вы неверно поняли мой вопрос: мне необходимо чтобы блок #2 был резиновый и подстраивался под свой внутренний контент по ширине, а блок #1 был также резиновым и занимал оставшееся место в контейнере. Вы же предлагаете зафиксировать одну из колонок, что не решает данной задачи. Надеюсь я грамотно объяснил мои нужды.

[Александр]

Artem Maximum: тогда вторую не фиксируйте, а первую сделайте width:100%;

[Artem Maximum]

Спасибо за решение, тоже хороший вариант.