floating fluid and fixed width element - html

Question

I want to have a 4 columns layout Panel Bar with the following conditions:
#c1, #c2 = with specific width
#c3 autofill with remaining width
#c4 auto width (e.g. increase / decrease width if more list added) and will correspond to #c3
I'm looking for a solution that could:
have #c4 floated to the right instead of position absolute
not having a specific margin right on #c3 and it will correspond spaces dynamically disregards how many list added to #c4
have a variable width on .smenu rather than having a specific width to get the list item flow horizontally.
work responsively cross platform and devices (minimum browser support IE8)
display smenu list horizontally without using a specific width for the container
Additional Issue:
When i hover to the a tag with class name .show-sub the .smenu shows
/ display but when i move my mouse over trying to hover over on one of the sub menu list it goes hidden. What was the way to work around to keep it open when i hover?
Different Attempt:
I've also tried with display:table-cell but couldn't get it working correctly. Click here for demo
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>
m1
<ul class="smenu">
<li>
a1
</li><li>
a2
</li><li>
a3
</li><li>
a4
</li>
</ul>
</li>
<li>
m2
<ul class="smenu">
<li>
b1
</li><li>
b2
</li><li>
b3
</li><li>
b4
</li>
</ul>
</li>
<li>
m3
<ul class="smenu">
<li>
c1
</li><li>
c2
</li><li>
c3
</li><li>
c4
</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

Have you considered placing #c1 and #c2 inside #c3. It would allow you to set their specific width, float them left or right, thus giving the illusion that #c3 is filling the empty space. I prefer to use tables in the case I need empty space filled. It's my experience that it requires drastically more markup to achieve liquid width with divs than tables.