Как сделать так, чтобы два блока растягивались по всей ширине в зависимости от контента?

Question

[Stas Karter]

Здравствуйте, вопрос таков, у меня в верстке есть два блока, которые нужно расположить в линию, но при этом они должны растягиваться по всей доступной ширине в зависимости от контента. Как известно отдельно блоки так себя и поведут, но чтобы выстроить их в ряд я делаю их либо inline-block, после чего они не растягиваются по всей ширине потому, что inline, либо float'ом ну и в результате они опять же не растягиваются. Каким образом можно это реализовать?

Comments

[Роман]

Т.е. они должны адаптивно растягиваться ? Если контента много то каждый на 100% ширины страницы, если мало - то на 50% ?

[Stas Karter]

Не совсем, есть родительский блок, который занимает 100%, в нем два дочерних. В первом блоке текст и ширина его зависит от текста, а второй это просто линия и она должна занимать остаток родительского блока, то есть если блок с текстом занимает 40%, то линия должна занимать 60%, если блок с текстом 60%, то линия соответственно 40%.

Answer 1

[IceJOKER]

если блок с текстом занимает 40%, то линия должна занимать 60%, если блок с текстом 60%, то линия соответственно 40%.
^^^
В данном случае вам поможет display: table-cell; либо просто таблица

Comments

[Stas Karter]

а с table-cell у меня почему-то блок с текстом начал занимать чуть-ли не 99%,при том, что там текста на 30%

[Stas Karter]

поясню, линией является картинка, которая повторяется repeat'ом, может это важно, хотя не понимаю чем.

[IceJOKER]

Stas Karter: как-то так - jsfiddle.net/j6bd1awo , экспериментируйте, ищите