Why is content displaying outside of this DIV? - html

Question

I have a PHP script that runs a completion progress bar. I want to display the percentage next to the bar...this should be the easy part. But for some reason, I can't get the percentage to display NEXT to the bar instead of UNDER it.
https://jsfiddle.net/
HTML
<div id="progress_bar_container">
<div id="progress_bar_background">
<div id="progress" style="width: <?php echo $progress_bar_width; ?>px;">
</div>
</div>
<div style="text-align: left; display: inline-block;">
<?php echo $completed_lc_percentage . "%"; ?>
</div>
</div>
CSS
#progress_bar_container {
width: 220px;
height: 20px;
}
#progress_bar_background {
display: block;
background-color: #eaeaea;
width: 200px;
height: 20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
#progress {
display: block;
background: #a8c25d;
height: 20px;
width: 0px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}

Answer 1

You need to make sure that the container is wide enough to hold the two children elements inside, or you can use white-space:nowrap.
Make both children elements to display:inline-block, see the demo follows.
#progress_bar_container {
width: 220px; /*or increase the value*/
height: 20px;
white-space: nowrap; /*added*/
}
#progress_bar_background {
/* display: block; */
display: inline-block; /*added*/
background-color: #eaeaea;
width: 200px;
height: 20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
#progress {
display: block;
background: #a8c25d;
height: 20px;
width: 0px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
<div id="progress_bar_container">
<div id="progress_bar_background">
<div id="progress"> </div>
</div>
<div style="text-align: left; display: inline-block;">n%</div>
</div>

Answer 2

You need to float the progress_bar_background left, and then widen the width of the progress_bar_container to allow the percentage div to sit next to it. Here's an example of this working:
https://jsfiddle.net/b69ep74e/
You might want to push the progress percentage div down a pixel or two to line it up, and the width of the progress div should be a percentage.

Answer 3

That's because the #progress_bar_background doesn't have display: inline-block and the #progress_bar_container has a fixed width. That fixed width doesn't let space to the text.
Remove the width of #progress_bar_container or increase it. Add display: inline-block to #progress_bar_background and it should work fine.
https://jsfiddle.net/2qn9eecr/

Answer 4

It is because you're #progress_bar_container's allowance space is very little the percentage can't fit in the space NEXT to the bar and you also have to add a float:left; in your #progress_bar_background css.
#progress_bar_container {
width: 300px;
height: 20px;
}
#progress_bar_background {
display: block;
float:left;
background-color: #eaeaea;
width: 200px;
height: 20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
#progress {
display: block;
background: #a8c25d;
height: 20px;
width: 0px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
<div id="progress_bar_container">
<div id="progress_bar_background">
<div id="progress" style="width: 100px;">
</div>
</div>
<div style="text-align: left; display: inline-block;">
50%
</div>
</div>