CSS/HTML Text over background

Question

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.

HTML

<div id="details">
<div id="stat_bar">
    <div id='details' style="width:100%">Exp</div>
</div>
<br>
<br>
<div id="stat_bar">
    <div id='details' style="width:100%">Energy 12/12</div>
</div>
<br>
<br>
<div id="stat_bar">
    <div id='details' style="width:80%">Stamina 100%</div>
</div>
<br>
<br>
<div id="stat_bar">
    <div id='details' style="width:100%">Adrenaline 12/12</div>
</div>
<br>
<br>
<div id="stat_bar">
    <div id='details' style="width:10%">Health 10%</div>
</div>
<br>
<br>

Here is my fiddle http://jsfiddle.net/nay3rv36

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.

Answer 1

Id's on elements should be unique.

Check out this : http://jsfiddle.net/js3mptyy/1/

For a full html / css update.

#details #stat_bar div {
    background:#006600;
    height:14px;
    white-space: nowrap;
}

Would sort your problem if you keep the id's as is.

Adding white-space: nowrap will stop text wrapping to a new line in a small div.