CSS - Prevent an element from wrapping in a progress bar

Question

I'm designing an animated progress bar to display ratings on my website. At the end of the bar, I want to display inside a circle the rating number (out of 10) corresponding to the final progress % of the bar. I want to have a responsive design.

My problem arises when dealing with a high progress %, such as 95%. The circle with the rating value is sent down to the next line. It is also the case when resizing my browser with a progress value such as 75%. With lower values, everything is fine. I tried to play around with negative margin-left and margin-right values for #ratingnumber , which seems to help a bit but still had trouble keeping the rating circle on the progress bar for really high progress %.

I'm looking for the CSS tweak to keep the rating circle on the progress bar for every rating cases.

jsfiddle for 95%: http://jsfiddle.net/4pzm98b0

jsfiddle for 50%: http://jsfiddle.net/z1wtqebj/

<div id="progressbar">
    <div id="progress"></div>   
    <div id="ratingnumber"> 
        9.5
    </div>
</div>

body {
    background-color: #aaa;
    padding: 40px;
}

#progressbar {
    width: 100%;
    height: 20px;
    background-color: white;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 3px;
    border: 3px solid #666666;
    clear: both;
}

#progress {
    background: green;
    height: 20px;
    width: 0%;
    max-width: 100%;
    float: left;
    -webkit-animation: progress 2s 1 forwards;
    -moz-animation: progress 2s 1 forwards;
    -ms-animation: progress 2s 1 forwards;
    animation: progress 2s 1 forwards;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#ratingnumber{
    border: 4px solid green;
    background: white;
    padding: 10px;
    float: left;
    font-size: 28px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
    border-radius: 50%;
    position: relative;
    left: -30px;
    top: -24px;
}

@-webkit-keyframes progress { 
    from { }
    to { width: 95% }
}

@-moz-keyframes progress { 
    from { }
    to { width: 95% }
}

@-ms-keyframes progress { 
    from { }
    to { width: 95% }
}

@keyframes progress { 
    from { }
    to { width: 95% }
}

Answer 1

Add white-space: nowrap to the parent element, #progressbar . Then remove float: left from the children elements, and change the display to inline-block in order for them to respect the white-space property on the parent. Set vertical-align: top on the children in order to fix the vertical alignment.

Updated Example

#progressbar {
    white-space: nowrap;
}
#ratingnumber, #progress {
    display: inline-block;
    vertical-align: top;
}

The positioning on the #ratingnumber element also needs to be changed to:

#ratingnumber {
    position: relative;
    top: -20px;
}