Плавающая жидкость и элемент фиксированной ширины

Question

Я хочу иметь панель панели макета с 4 столбцами при следующих условиях:

• # c1, # c2 = с определенной шириной
• #c3 автозаполнение с оставшейся шириной
• #c4 автоматическая ширина (например, увеличение / уменьшение ширины, если добавлено больше списка) и будет соответствовать #c3

Я ищу решение, которое могло бы:

• #c4 сместился вправо вместо абсолютной позиции
• не имеет определенного права на поле #c3, и оно будет соответствовать пробелам, динамически игнорируется, сколько списка добавлено в #c4
• иметь переменную ширину в.smenu, а не определенную ширину для горизонтального перемещения элемента списка.
• работать быстро и на разных платформах (минимальная поддержка браузера IE8)
• отображать список меню по горизонтали без использования определенной ширины для контейнера

Дополнительный выпуск:

• При наведении курсора на тег с именем класса.show-sub.smenu показывает / отображает, но когда я перемещаю мышь, пытаясь навести курсор мыши на один из списков подменю, он скрывается. Какой был способ обойти это, чтобы держать его открытым, когда я парю?

Другая попытка:

Я также попытался с display:table-cell, но не смог заставить его работать правильно. Нажмите здесь для демонстрации

HTML

<div id="sticky-bar" class="cf">
    <div id="c1" class="left">col 1</div>
    <div id="c2" class="left">col 2</div>
    <div id="c3">
        <span class="incredibly-long-txt">So many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many tex</span>
    </div>
    <div id="c4">
        <ul class="mmenu">
            <li> 
                <a href="#" class="show-sub">m1</a>
                <ul class="smenu">
                    <li> 
                        <a href="#">a1</a>
                    </li><li> 
                        <a href="#">a2</a>
                    </li><li> 
                        <a href="#">a3</a>
                    </li><li> 
                        <a href="#">a4</a>
                    </li>
                </ul>
            </li>
            <li> 
                <a href="#" class="show-sub">m2</a>
                <ul class="smenu">
                    <li> 
                        <a href="#">b1</a>
                    </li><li> 
                        <a href="#">b2</a>
                    </li><li> 
                        <a href="#">b3</a>
                    </li><li> 
                        <a href="#">b4</a>
                    </li>
                </ul>
            </li>
            <li> 
                <a href="#" class="show-sub">m3</a>
                <ul class="smenu">
                    <li> 
                        <a href="#">c1</a>
                    </li><li> 
                        <a href="#">c2</a>
                    </li><li> 
                        <a href="#">c3</a>
                    </li><li> 
                        <a href="#">c4</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

*, *:before, *:after {
    box-sizing: border-box;
}
ul, li {
    margin: 0;
    padding:0;
    list-style:none;
}
a {
    color: #fff;
}
.left {
    float: left;
}
.right {
    float: right;
}
.cf:before, .cf:after {
    content:'';
    display: table;
}
.cf:after {
    clear:both;
}
.cf {
    *zoom: 1;
}
#sticky-bar {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    display: block;
    width: 100%;
    height: 30px;
    background: #582A72;
    position: relative;
}
#c1 {
    width: 100px;
    height: 100%;
    background: #9775AA;
    padding: 6px;
}
#c2 {
    width: 150px;
    height: 100%;
    background: #764B8E;
    padding: 6px;
}
#c3 {
    height: 100%;
    background: #3D1255;
    padding: 6px;
    margin: 0 90px 0 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#c4 {
    background: #260339;
    position: absolute;
    right:0;
    top:0;
}
.mmenu {
    display:block;    
}
.mmenu li {
    float:left;
    width: 30px;
    height: 30px;
    text-align: center;
    border-left: 1px solid #fff;
    background: #887CAF;
}
.mmenu li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6px 0;
    position: relative;
}
.smenu {
    display: none; 
    background: #403075;
    position: absolute;
    top: 100%;
    right: 0;
    width: 120px;
}
.smenu li {
    background: #882D61;
}
.show-sub:hover  + .smenu {
    display: block;
}

Answer 1

Рассматривали ли вы размещение #c1 и #c2 внутри #c3. Это позволит вам установить их конкретную ширину, перемещать их влево или вправо, создавая иллюзию, что # c3 заполняет пустое пространство. Я предпочитаю использовать таблицы в том случае, если мне нужно заполнить пустое пространство. По моему опыту, для достижения ширины жидкости с помощью div'ов требуется значительно больше разметки, чем для таблиц.