CSS / HTML text in the background
I've always run into little problems with layouts. I need help with part of it. I really don't know how to explain, but I'll do my best. [/ P>
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 is pushed to the bottom. I want the text to stay in the box, but the background is at the bottom.
+3
source to share
1 answer
Item ID must be unique.
Take a look: http://jsfiddle.net/js3mptyy/1/
For a complete html / css update.
#details #stat_bar div {
background:#006600;
height:14px;
white-space: nowrap;
}
Will sort your problem if you keep the id as is.
Adding a space: nowrap will stop text wrapping on a new line in the small div.
+6
source to share