Dynamically increment width of css element in a for loop - php

Question

EDIT: i found out, itsin my other answer below.
I want to present a graph in php and can create the columns, but when i try to increment the percentage to correspond with the css width of the .inner class it wont increment for each element in he array. How can I increment the width for each element in the array?
$percentage = array(0.2,0.4,0.5,0.6,0.7,0.8);
for($i=0;$i<6;$i++){
echo "<div class='outter'>
<div class='inner'>"; echo $percentage[$i]; echo "
</div>
</div>";
echo "<style type='text/css'>";
echo ".outter{height:25px;width:500%;border-right:solid 1px #000;}";
echo ".inner{height:25px;width:";echo $percentage[i]; echo "%;border-right:solid 1px #000;background-color:#02abff;}";
echo "</style>";
}
i can do it in html and css but i want to do it php. Thanks.

Answer 1

Not sure if you have noticed, but the actual values you have there are 0.X%, and this is not exactly a valid width. You might want to multiply that value by 10 (or by 100) to get to 2% (or 20%).
$percentage = array(0.2,0.4,0.5,0.6,0.7,0.8);
foreach ($percentage as $key => $val) {
echo "<div class='outter'>
<div class='inner'>";
echo $val;
echo "</div>
</div>";
echo "<style type='text/css'>";
echo ".outter{height:25px;width:500%;border-right:solid 1px #000;}";
echo ".inner{height:25px;width:";
echo $val * 10;
echo "%;border-right:solid 1px #000;background-color:#02abff;}";
echo "</style>";
}
I also changed the for loop that you had there to foreach loop, which makes more sense when working with arrays.

Answer 2

I found out. I had to put the styling inside the html tag:
foreach($percentage as $percent){
echo "<div class='outter' style='height:25px;width:500%;border-right:solid 1px #000;'>
<div class='inner' style='height:25px;width:"; echo $percent; echo "%;border-right:solid 1px #000;background-color:#02abff;'>"; echo $percent; echo "
</div>
</div>";
}