Getting Divs to work Properly in HTML Table

I'm working on an economics project at the moment and a web component was a suggestion in the guidelines, so I jumped into it.

Basically, I have to chart out a graph of the U.S. budget deficit and describe certain key dates.

The bar graph is causing me some grief, however. I have constructed graphs before by generating an image with php, but I decided that I might as well strengthen my html skills (I learned PHP, javascript, and css before html, somehow).

Right now, the table is perfect, except for the fact that my divs (my bars) are not showing up properly within their appropriate cell.

Basically, the 开发者_如何学Gotable has 31 columns (representing the dates 1980-2010) and I'm trying to place a colored div inside of it to make it look like a bar.

    Column
 ------------
|            |
|            |
|            |
|            |
|            |
|            |
|            |
|  --------  |
| |        | |
| |  Div   | |
| |        | |
| |        | |
| |        | |
| |        | |
 ------------

The page can be found here: here.

As you can see, there are no bars showing up. Why might this be? I'm using the inspect element tool on Google chrome and can't seem to spot anything suspicious.

---

The total super clean way is write the whole page in div's.

The issue is the DIV has no content. Personally I would create a 1px heigh "shim" to the colour (color) you want, then send the height % to the appropreate height. (this you can also change in javascript (or jquery) client side, this will render in more browser and you can add a shine to the shim etc.

The reason for the image is DIV's need "solid" objects like text or images, just try putting a " " in your div. It should then show...

This works:

<td style="vertical-align:bottom">
        <div width="30" style="background-color:#FF0000; height:50%;">&nbsp;</div>
</td>

@Sarfraz, that article is 2007 and is buggy across browers (check out the comments)

---

i noticed that you are setting the height of the div as an HTML attribute. And this is not working. Set the height in the style attribute and with the unit, like style="height: 234px" and that works fine. I just checked it with Firebug.