I'm working on a case study page and I've created an UL to show off some metrics. I want this UL to float inside the main body copy. Almost working on FF and Safari but IE won't play nice at all. The UL needs to be flexible width and I want each LI to be as wide as it needs to be. End result is to look like a bar graph.
FF and Safari are floating nicely but each LI is as long as the widest one instead of being different widths. IE makes the width as wide as the body copy that the UL is floating in. The first LI (700 registered voters) should look shorter than the second LI (1,845 unique site visitors).
Sorry if this doesn't make sense but check out the link and it should.
Adam, Are you wanting to simulate the look of what's currently at the URL you provided: http://www.garfieldgroup.com/newstudies/casestudiespage.html ? Or like the thumbnail image on the right side of this post page?
Can you upload it with your code in place instead of the image? My best guess is that you need to float everything inside the UL as well as just the UL to get the desired effect.
I apologize for not having time to test this myself but this is what I would do:
Float the LI's and set them to "clear:both" or "clear:left" so that they stack vertically and do not wrap. Setting them to float should make them only expand as wide as they need to be.
Next set the UL to Float, which should make the UL only expand as wide as the widest LI. You could even try setting the UL to "inline" or "inline-block". But either way that should do the trick!
Is this what you're looking for? http://bit.ly/kmPVK
Alen Grakalic from Css Globe has a pretty good article/solution for bar graphs. Although the example shows vertical graphs you can easily style them into horizontal ones.
Not sure if you will already have the answer to this, but my immediate thought is that it wont work with LI and UL items, but would work with a DIV and H1 tags? Set the DIV to float right and then have the H1 tags with set backgrounds? Add the smaller text with spans or style the numbers with STRONG tags?
Good luck, sorry I cant give you a better idea.