CSS3: Making Overlapping Div

Question

I am trying to create this effect by using HTML in UIWebView control of iOS. The goal is to create the effect of progress bar on the listing. So far I tried this but as you see, by adding a padding on diV makes everything messed up. How can I achieve similar effect? I have no issue of using table but seems that would be more difficult.

Thanks

Answer 1

Why not just use nested divs and give the inner Div a percentage width.

<div><div class="inner"></div></div>

And CSS:

div {
    background-color: blue;
    height: 30px;
}
.inner {
    width: 50%;
    background-color: skyblue;
}

Since divs are block level element they have a 100% width by default so you don't need to explicitly specify it for the outer div if that is sufficient.

Another possibility would be to use a background gradient and just move alter the background-position.

Answer 2

In the code you supplied you have this div:

<div style='position:absolute;left:0%; background-color: hsl(30,100%,59%);width:30%;z-index:10;'>&nbsp;</div>

Just add "top: 0px;" to it so that it becomes

<div style='position:absolute;left:0%; top: 0px; background-color: hsl(30,100%,59%);width:30%;z-index:10;'>&nbsp;</div>

And it will look correct.

Edit: And then give the LI elements position: relative to make it work with multiple elements. See http://jsfiddle.net/tFn78/9

Another version which is a bit cleaner: http://jsfiddle.net/v7zNn/ and adjusts to variable height of the title.