https://i.stack.imgur.com/0K2TD.png
Total width of the bar is set to 500px, with the red box at a width of 150px, the yellow box at 200px, and the green box at 50px.
CSS Styles:
.box {
float:left;
width:150px;
box-shadow:3px 3px 2px #666767;
height:30px;
}
.red {
background-color:#ff0000;
width:150px;
}
.yellow {
background-color:#ffff00;
width:200px;
}
.green {
background-color:#00ff00;
width:50px;
}
HTML Markup :
content += "<div class=\"box-container\">
<div class=\"box red\">
</div>
<div class=\"box yellow\">
</div>
<div class=\"box green\">
</div>
</div>
</br>";
This code snippet helps in determining the individual widths of the red, yellow, and green boxes using CSS properties.