I’m trying to create a horizontal 100% stacked bar graph using HTML and CSS. I’d like to create the bars using DIVs with background colors and percentage widths depending on the values I want to graph. I also want to have a grid lines to mark an arbitrary position along the graph.
In my experimentation, I’ve already gotten the bars to stack horizontally by assigning the CSS property float: left. However, I’d like to avoid that, as it really seems to mess with the layout in confusing ways. Also, the grid lines don’t seem to work very well when the bars are floated.
I think that CSS positioning should be able to handle this, but I don’t yet know how to do it. I want to be able to specify the position of several elements relative to the top-left corner of their container. I run into this sort of issue regularly (even outside of this particular graph project), so I’d like a method that’s:
- Cross-browser (ideally without too many browser hacks)
- Runs in Quirks mode
- As clear/clean as possible, to facilitate customizations
- Done without JavaScript if possible.