Why is content displaying outside of this DIV?

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;">
            &nbsp;
        </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;

}

score 1 · Answer 1 · answered Apr 20 '15 at 00:24

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">&nbsp;</div>
    </div>
    <div style="text-align: left; display: inline-block;">n%</div>
</div>

Be aware there is white space between inline block elements, approx. 4px, take a look here http://stackoverflow.com/a/5078297/483779 to learn more. — Stickers, Apr 20 '15 at 00:37
All good answers. The white-space: nowrap; was the simplest and best solution...this isn't all my code. It needs to have that fixed width. Also, display: inline-block; only needs to be added the the progress bar background, if you add it to the progress bar itself, it will take its place in the center of the background. Cheers. — Allenph, Apr 20 '15 at 00:47

score 1 · Answer 2 · answered Apr 20 '15 at 00:24

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.

score 1 · Answer 3 · answered Apr 20 '15 at 00:30

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/

score 0 · Answer 4 · answered Apr 20 '15 at 04:06

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;">
            &nbsp;
        </div>
    </div>
    <div style="text-align: left; display: inline-block;">
        50%
    </div>
</div>

Why is content displaying outside of this DIV?

4 Answers4