Problems with HTML4 progress bar

Question

What I want to accomplish:

I am trying to build my own, very simple, progress bar. It has to be HTML4, since it is used for an Android App (most Android browsers do not support the HTML5 progress tag)

I want to be able to update it with javascript, whenever a change of value in a select combobox is triggered. The element looks like this:

<div style="width:100px">
  <div id="prog4" class="progressleft" style="width:100%"></div>
  <div class="progressright"></div>
</div>

You can see the element in action here.

My problem:

1. I get on the site: the combobox is selected with the maximal value, the progress bar is shown at 100%
2. I change the value of the combobox: everything works as expected
3. I set the value of the combobox back to 100%: Now I see 2 bars, one green in the first line (looks like width = 100%) and one red on the second line (also looks like width = 100%)

Anyone knows why this could be happening? It works perfectly on jsFiddle...

(btw., it also works perfectly if I copy the whole page into jsFiddle)

Answer 1

I added overflow:hidden; and height:20px; to the parent div. Now it works fine.

See the jsFiddle

The CSS now looks like this:

.progress {
    overflow: hidden;
    width:100px;
    height:20px;
}
.progressleft {
    float: left;
    height: 20px;
    background: #6d6
}
.progressright {
    overflow: hidden;
    height: 20px;
    background: #d66;
}