How to dynamically piece page elements together to form a square?

I have a number of items with different values. I'd like to represent each ite开发者_Python百科m as a square with its size corresponding to its value, where each square is a component of a larger square. All the squares of different sizes fit together to make a larger, perfect square.

Is it possible to do something like this with HTML/CSS? Does anyone know of any resources I that might get me started with the right techniques?

Or would this be better suited to JavaScript or something else?

Sounds like a treemap. There seems to be a number of Javascript libraries for accomplishing this kind of visualization, for example the Javascript InfoVis Toolkit, Treemap in Google Visualization API or this jQuery plugin.

Take a look at ted.com and see how they're doing something similar. It's pretty cool.