title: 3 Div's in a container with a Dynamic Width Centered Div
body: <pre><code>&lt;style type=text/css"&gt;
  
   #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;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;div id="container"&gt;
     &lt;div class="left button"&gt;&lt;/div&gt;
        &lt;div class="middle indicators"&gt;
           &lt;div class="circle&gt;&lt;/div&gt;
           &lt;div class="circle&gt;&lt;/div&gt;
           &lt;div class="circle&gt;&lt;/div&gt;
        &lt;/div&gt;
     &lt;div class="right button"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>