Как сверстать 3 колоночный fluid layout, где боковые колонки занимают все свободное место?

Question

[Влад Романовский]

Приветствую!
Была поставлена задача реализовать меню как на скриншоте https://goo.gl/RNTVgw.
Все бы ничего, но при hover, фон у пункта должен меняться на полупрозрачный.
Сейчас сделано следующим образом: динамически создаю before и after элементы через JS и назначаю им ширину да позиционирую, чтобы замостили свободное место.

var fillColumns = function () {
    var headerWidth = $('header').innerWidth();
    var navWidth = $('.navbar .navbar-nav').innerWidth();
    var fillColumnWidth = Math.ceil((headerWidth - navWidth) / 2);
    $('#fillColumns').remove();
    var css = '<style id="fillColumns">.navbar .navbar-nav::before,.navbar .navbar-nav::after{width:' + fillColumnWidth + 'px;}</style>';
    document.head.insertAdjacentHTML('beforeEnd', css);
};

Без них меню выглядит следующим образом https://goo.gl/QebXC8. На голом CSS реализацию нашел stackoverflow.com/questions/8283225/three-column-l... , но центральный блок не обтекается по контенту, поэтому остается пустое место без фона.
В общем вопрос таков. Как можно реализовать fluid layout из 3 столбцов, где центральный имеет ширину, равную ширине внутреннего контента, а боковые блоки растягиваются по свободному месту.

Comments

[Влад Романовский]

master-m.site текущий черновой результат, дабы можно было на результате понять, что происходит с меню

Answer 1

[Сергей delphinpro]

jsfiddle.net/XMg2h/670

по-моему всё достаточно очевидно решается без скриптов.

UPD (из комментов)
jsfiddle.net/XMg2h/671
jsfiddle.net/XMg2h/672

Comments

[Влад Романовский]

но центральный блок не обтекается по контенту

Даже в вашем примере центральный блок шире слова center. А в задаче сказано четко, что fluid layout, без фиксированных величин.

[Сергей delphinpro]

Влад Романовский: так что ли? jsfiddle.net/XMg2h/671

[Сергей delphinpro]

или так jsfiddle.net/XMg2h/672

[Влад Романовский]

Стыдно мне не знать такого решения с table-cell :( А вот решение в флексом для меня новое совсем. Благодарю за помощь!

[Влад Романовский]

Для конкретно моего решения, нужно поправить ещё li элементы и ul контейнер. Для элементов float:none; для ul white-space:nowrap; ну и убрать отступы посредством игр с font-size

Answer 2

[Артем Спиридонов]

JS можно применять?

А в чем проблема?

Comments

[Влад Романовский]

JS плох тем в данном случае, что так или иначе CSS подгрузится раньше, чем отработает скрипт. У клиента будет фон моргать. Проблема в том, что если бы не прозрачный фон у li при наведении, я бы просто всему контейнеру назначил background и растянул по ширине. А здесь нужно, чтобы при наведении на li отображался красивый градиент с прозрачностью и фоновая картинка со слайдера. И фон li есть продолжение градиента от полосы, что выше находится над меню. Если подскажете красивое решение, чтобы от его не тошнило, то буду очень благодарен

[Влад Романовский]

Даже JS решение будет хорошим, но нужно как-то подстраховаться от мигания фона. Инклюд скрипта сразу под DOM элементом меню - это решение в лоб.