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

Я хочу иметь макет панели с 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;
}