3 Div's in a container with a Dynamic Width Centered Div - css

Question

<style type=text/css">
#container {
height:30px;
width:100%;
}
.left.button {
float:left;
width:60px;
}
.right.button {
float:right;
width:60px;
}
.middle.indicators {
height:30px;
}
.middle div{
display: inline-block;
margin: 10px 2px;
}
.circle {
background: rgb(102,102,102);
border: 1px solid #FFF;
border-radius: 50% 50% 50% 50%;
height: 7px;
width: 7px;
}
</style>
I have 3 divs in a container. I want to push the left button div left and the right button div right and have the middle indicators div in the center. The issue is the middle div needs to be dynamic width since the number of circle divs inside changes dynamically based on other variables. There could be 3 circles or 5 or 10. I need the middle div to stay centered and also be able to expand based on the number of circle divs inside.
<div id="container">
<div class="left button"></div>
<div class="middle indicators">
<div class="circle></div>
<div class="circle></div>
<div class="circle></div>
</div>
<div class="right button"></div>
</div>

Answer 1

I would change the CSS a little to get things like this jsFiddle example (div borders added to make visualizing them easier). By giving the middle indicators div a left and right margin slightly larger than the width of the left and right button divs, you allow it to float up between the two and take up as much space as possible.
CSS:
div {
border: 1px solid #999;
}
#container {
height: 30px;
width: 100%;
}
.left.button {
float: left;
width: 60px;
}
.right.button {
float: right;
width: 60px;
}
.middle.indicators {
height: 30px;
text-align:center;
}
.middle {
margin: 0 70px;
}
.circle {
background: #666;
border: 1px solid #FFF;
border-radius: 50% 50% 50% 50%;
height: 7px;
width: 7px;
display: inline-block;
}