Position divs in a tag cloud structure without overlap?

Hi, I wondered if someone could help.

I need to build a system that pulls numbers out of an array and displays them in a cloud like pattern (a range of different sizes and colours). I'm stumped on how to build a system to create the divs so they don't overlap and make a nice tight structure. Any pointers would be great.

Mock Up: http://img228.imageshack.us/my.php?image=example.png

From stackoverflow

• I imagine you should look at some of the tag cloud generation mechanisms flying around out there and see how they do their business.

  chaos : If I were trying to do that, I'd start by playing with the margin, padding, line-height and letter-spacing CSS properties on the divs.

• Isn't that the purpose of the margin in CSS?

  I should imagine that setting a 1-px all-round margin will make sure that no div is less than a pixel from another.

  Mark Hurd : The problem is the random placement, spacing, and sizing of each tag. CSS is still very grid-centric. Looking at his mockup, think of each tag enclosed in a box. All those gaps and overlaps that result would be tricky to pull off in CSS alone.