css tree folders list with jquery progress bar

Question

I have a tree of folders and I want to add a progress bar next to the folder name which is also an anchor. The progress bar div section is the jQuery UI progress bar div.

The pblabel element should seat on top of the progress bar. The bar element is the progress bar itself with a variable width.

<ul>
  <li>
    <a href="" style="display: inline;">test</a>
    <div id="progressbar" style="display: inline; height: 2em; background: white;">
      <div id="pblabel" style="position: absolute">progress</div>
      <div id="bar" style="display: inline; background: blue; width: 30%; height: 100%;></div>
    </div>
  </li>
</ul>

I can see the anchor element fine with the pblabel element next to it. I don't see the blue bar element or the white background of the progressbar element.

Answer 1

<div id="bar" style="display: inline; background: blue; width: 30%; height: 100%;></div>

This line is missing a " before the >. Besides that the reason you are not seeing the blue bar is that it has a width of 30% and is inline (and it is also empty). inline means that it will use as few space as possible; for that reason a width is meaningless for inline elements.

Since the div is empty (there is nothing inside) and is inline its width will be 0 and you won't see it.