Calculate the width using javascript and adjust the css

Question

I am using javascript for calculation of width for #red and #yellow and css to design. The html is :

<div id="gray">
   <div id="red"></div>
   <div id="yellow"></div>
</div>

<style>
  #gray {
    width:100px;
  }
  #red {
    background-color:red;
    float: left;
  }
  #yellow {
    background-color: yellow;
    float:left;
  }
</style>

The width is calculated in percentage to fill the color for #gray . The display is proper till the sum of the width for #red and #yellow is less then or equal to 100% as because i have considered the div #gray as 100% width . If the sum exceeds 100% then the color bar appears in two lines. Can the width for #gray be calculated when the sum exceeds 100% such that the bar comes in one line along with may be dotted line as an indicator where 100% width is exceeded. Please ask me if i am unclear with what i mean. Basically i want both #yellow and #red to be in same line and not one below other

Edit :

config.hourPerPercent=parseInt(data.totalspace)/100;
var futureNum=new Number((1/config.hourPerPercent)*parseInt(data.inuse));
var recNum=new Number((1/config.hourPerPercent)*parseInt(data.used));

config.Usage=futureNum.toFixed(2);              
config.Used=recNum.toFixed(2);

$('#red').css('width',config.Used+'%');         
$('#yellow').css('width',config.Usage+'%');

The width is changed dynamically with the change of data and calculated whenever there is any change in data. I have attached three images below which will make it easy to understand what i mean. For the first image as the sum of the width is greater then 100% the #yellow comes below #red . Green color background is the width of #gray . I want that when the sum of width increases 100% #yellow should not come below #red instead it should be like the second image with a visual indication may be dotted line at the point where 100% limit is crossed like the third image. Hope this helps to explain my problem.

Answer 1

<div id="gray">
   <div id="red"></div>
   <div id="yellow"></div>
</div>

The jQuery will be place it inside $(document).ready()

var w_red=$("#red").outerWidth(true);
var w_yellow=$("#yellow").outerWidth(true);
$("#gray").width(w_red+w_yellow);

According to your UPDATE

config.hourPerPercent=parseInt(data.totalspace)/100;
var futureNum=new Number((1/config.hourPerPercent)*parseInt(data.inuse));
var recNum=new Number((1/config.hourPerPercent)*parseInt(data.used));

config.Usage=futureNum.toFixed(2);              
config.Used=recNum.toFixed(2);
var factor=1.0;
if( (config.Usage + config.Used)>100 )
{
 factor=(config.Usage + config.Used)/100;
 config.Usage= Math.round(config.Usage / factor);
 config.Used=100-config.Usage;
}


$('#red').css('width',config.Used+'%');         
$('#yellow').css('width',config.Usage+'%');

In this way there will be and error of +/-1. But it is much better.

Answer 2

I have done the following way :

config.hourPerPercent=parseInt(data.totalspace)/100;
var futureNum=new Number((1/config.hourPerPercent)*parseInt(data.inuse));
var recNum=new Number((1/config.hourPerPercent)*parseInt(data.used));

config.Usage=futureNum.toFixed(2);              
config.Used=recNum.toFixed(2);

var rem=Math.round(100-(futureNum + recNum));
if(rem<0){
    $('#red').css('width',config.Used+'px');            
    $('#yellow').css('width',config.Usage+'px');
    $('#gray').css('width',(futureNum + recNum)+'px');
}else{
    $('#red').css('width',config.Used+'%');         
    $('#yellow').css('width',config.Usage+'%');
}

Any better suggestion would be appreciated.