float div in between 2 left/ right aligned divs - html

Question

I have a div floated left, and a div floated right with a variable gap in between the 2 (responsive).
I need to be able to fill the gap in the middle with a colour, but only the gap in the middle (it can not flow behind the other 2 divs, as these divs have transparent backgrounds)
how can I achieve this with html structure like:
html
<div class="nav-wrap">
<ul class="nav">
</ul>
<div class="filler"></div>
<ul class="nav right">
</ul>
</div>
css
.nav-wrap{
float:left;
width:100%;
}
.nav{
float:left;
height:50px;
width:200px;
margin:0;
padding:0;
}
.nav.right{
float:right;
}
.filler{
?????
}

Answer 1

For filler, give it a margin that is equal to the width of the navs:
.filler{
margin: 0 200px;
background-color: blue;
}
To make this work, put both navs before the div in the HTML:
<div class="nav-wrap">
<ul class="nav">
</ul>
<ul class="nav right">
</ul>
<div class="filler">X</div>
</div>
Fiddle: http://jsfiddle.net/yyZz6/1/

Answer 2

You can use table layout of this purpose.
.nav-wrap{
width:100%;
display:table;
table-layout:fixed;
}
.nav{
display:table-cell;
height:50px;
width:200px;
margin:0;
padding:0;
}
.filler{
display:table-cell;
background: ?;
height:50px;
}
Example

Answer 3

You can use the following html:
<div class="nav-wrap">
<ul class="nav left">
</ul>
<div class="filler"></div>
<ul class="nav right">
</ul>
</div>
With the following styles:
.nav-wrap{
padding:0 200px;
overflow:auto;
}
.nav{
height:50px;
width:200px;
margin:0;
padding:0;
}
.nav.right{
float:right;
margin-right:-200px;
}
.nav.left{
float:left;
margin-left:-200px;
}
.filler{
width:100%; float:left;
}
Example

Answer 4

Consider using flex-grow of CSS flexbox
.filler{
background: SaddleBrown; flex-grow: 1;
}
Fiddle

Answer 5

If you are trying to achieve responsive design you should not use fixed width. Instead i suggest you try this:
<div class="nav-wrap">
<ul class="nav">
</ul>
<div class="filler">
</div>
<ul class="nav">
</ul>
</div>
<style type="text/css">
.nav-wrap{
float:left;
width:100%;
}
.nav, .filler{
border: 1px solid black;
}
.nav{
float:left;
height:50px;
width:13%;
margin:0;
padding:0;
}
.filler{
float: left;
width: 64%;
}
<style>