2005 • July • 02

Treemaps from unordered lists and CSS

Another little test, this time trying to build something like a Treemap, using CSS and semantic HTML.

The above image is an example of what I'm trying to go for. Here's a sample of what I've got:

http://www.decafbad.com/2005/06/tree.html

Two things I can't seem to work around with my understanding of CSS:

Is there a way to clear the floats in the unordered lists without using a break?
Is there a way to even out the heights and widths of the columns / rows without some Javascript intervention?

shortname=css_treemaps

Archived Comments

fluffy

2005-07-03T00:39:49

1. You can use a span whose style contains clear:both, or if you already have something which already goes after the list anyway you can set its style to clear:both 2. You can use container-relative sizes (e.g. width:33% height:25%) or font-relative sizes (width:15em height:10em). Then you have to know how big they'll be in advance, though, or else things might overflow the box, though if you set overflow:auto then you'll get a handy little scrollbar. (note that this is also one of the more annoying places if you want to support IE since it uses totally different semantics than the W3C standards. unfortunately, even a vendor as major as my employer needs to cater to our 70% IE userbase, which is REALLY annoying with some of the CSS/DHTML tricks I'm working with right now.)
Anne

2005-07-03T05:48:13

For the first you can use generated content in combination with _height:1%; for Internet Explorer. Sometimes it's wise to use some other technique for clearing them though, depends on the situation. (Other technique: http://annevankesteren.nl/2005/03/clearing-floats ) For the second, you either want to make smart use of background images or the CSS table module that isn't supported by Internet Explorer.
drunkenbatman

2005-07-13T16:59:04

very, very cool
vinod ts

2006-09-07T12:16:45

hi,

I was looking throught the sites for treemap using dom javascript in browser. i am looking for something similar to the image in web page. i am getting the values like x,y cordinates and their respective width and height and their childs x,y cordinates and their width and height. Can u give some ideas how to start working on it.

Thanks in Advance.

Regards Vinod T S