title: CSS3 Progress Bar - use span to define amount of progress
body: <p>I'm working on making a progress bar for this project i'm working on and i've half worked it out but now I've hit a wall that i can't seem to work out. </p>
  
  <p>The problem I've got is that the child div doesn't dictate the parent div's width. (so the span doesn't tell progressbar that it should be 60% wide.)</p>
  
  <p>Live demo can be found here -
  <a href="http://codepen.io/anon/pen/BoGvvL" rel="nofollow">http://codepen.io/anon/pen/BoGvvL</a></p>
  
  <pre><code>&lt;div class="progress-container"&gt;
      &lt;div class="progressbar"&gt;
          &lt;span style="width:60%"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>* {
    box-sizing:border-box;
  }
  
  .progress-container {
      width:150px;
      margin:0 auto;
      background:#CDCDCD;
      height:30px;
      border-radius:8px;
      padding:3px 5px;
  }
  .progressbar {
      height: 24px;
      width:0%;
    max-width:100%;
      border-radius:8px;
      background: -webkit-linear-gradient(left, #f63a0f, #f2d31b, #86e01e); 
      background: -o-linear-gradient(right, #f63a0f, #f2d31b, #86e01e); 
      background: -moz-linear-gradient(right, #f63a0f, #f2d31b, #86e01e); 
      background: linear-gradient(to right, #f63a0f, #f2d31b, #86e01e);  
  }
  </code></pre>
  
  <p>Could someone direct me in the right way please?</p>
  
  <p>Thanks in advance.</p>