title: CSS/HTML Text over background
body: <p>I always run into a little trouble with layouts. I need help with part of it. I don't really know how to explain but I'll do my best lol.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="details"&gt;
  &lt;div id="stat_bar"&gt;
      &lt;div id='details' style="width:100%"&gt;Exp&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div id="stat_bar"&gt;
      &lt;div id='details' style="width:100%"&gt;Energy 12/12&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div id="stat_bar"&gt;
      &lt;div id='details' style="width:80%"&gt;Stamina 100%&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div id="stat_bar"&gt;
      &lt;div id='details' style="width:100%"&gt;Adrenaline 12/12&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div id="stat_bar"&gt;
      &lt;div id='details' style="width:10%"&gt;Health 10%&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;br&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is my fiddle <a href="http://jsfiddle.net/nay3rv36" rel="nofollow">http://jsfiddle.net/nay3rv36</a></p>
  
  <p>As you can see when the width is low the text gets pushed to the bottom. I want the text to stay in the box but the background to be down.</p>