title: Coding a dynamic PHP css based progress bar - maths percent issue
body: <p>I'm coding a PHP progress bar that will update itself via a percent number that is given to it but I'm having issues working out the percents.</p>
  
  <p>My code currently is as follows:</p>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>$percent = $_GET['percent'];
  
  if($percent &lt; 5)
      //low-image.jpg
  
  elseif($percent &gt; 95)
     //high-image.jpg
  
  else{
  $lowpercent = 100 - $percent;
  
  $highwidth = 270 / 100 * $percent;
  $lowwidth = 270 / 100 * $lowpercent;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="first"&gt;&lt;/div&gt;
  &lt;div class="mid-first" style="width:&lt;?=$highwidth?&gt;px;"&gt;&lt;/div&gt;
  &lt;div class="mid-second" style="width:&lt;?=$lowwidth?&gt;px;"&gt;&lt;/div&gt;
  &lt;div class="last"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.first. mid-first, .mid-second, .last{
      display:block;
      float:left;
      height:62px;
      }
  .first{
      background:url(low.png);
      width:31px;
  }
  .mid-first{
      background:url(mid-first.png) repeat-x;
  }
  .mid-second{
      background:url(mid-second.png);
  }
  .last{
      background:url(high.png);
      width:32px;
  }
  </code></pre>
  
  <p><strong>The Problem</strong></p>
  
  <p>At the moment the percents are worked out slightly incorrectly, my maths brain seems to have been misplaced today...</p>
  
  <p>There are 4 divs, the first and last div take up 5% each so 10%, the middle divs then equal the other 90%.</p>
  
  <p>This means when the figure 50 is given passed in via the <code>$_GET</code> it will work out 50% of the middle bars not including the 5% first bar, which is wrong, it should take the first 5% into account and then work out the 50% pixel widths?</p>
  
  <p>How can I change the maths behind the percent to fix the two middle bars so that when 50% is applied both middle bars are equal in pixels?</p>