title: Vertical CSS Progress Bar
body: <p>I am working on creating a progress meter that comes from the bottom up using only HTML and CSS.  The problem I am facing is that the overlayed image doesn't line up where it belongs.  Could someone please help me out?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;h2&gt;Fall Fest Candy Collection&lt;/h2&gt;
  &lt;p&gt;The Fall Fest candy collection has begun!  Follow along with the progress bar as we attempt to reach our goal of one million pieces of candy!&lt;/p&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;div id="progress-bar"&gt;
  &lt;div id="progress-level" style="height: 79%; bottom: 0px; text-align: center;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;p style="margin-bottom: 15px; text-align: center;"&gt;79% collected&lt;/p&gt;
  &lt;p&gt; &lt;/p&gt;
  </code></pre>