Progress bar in HTML/CSS

Question

 dd { 
    /*position: relative; /* IE is dumb */
    display: block;                 
    float: left;     
    width: 500px; 
    height: 16px; 
    margin: 0 0 2p         


        

Answer 1

I suggest layering another bar over it and shifting it left/right as needed.

If the bars aren't supposed to stretch the length of the viewport, you could put them in a div with overflow:hidden to keep the illusion intact.

Edit:

I just figured out why I wanted to do it that way and not follow what you'd started. When I did something similar before, it was using images, where changing the width of course have mangled the overlaying image.

With just plain colors, I'm sure you could get away with just using the size. But I'd still use CSS to layer one over the other.