Plotting random, non overlapping divs in Javascript

I have a container of approximate开发者_开发百科ly 600 by 400 pixels, into which I want to randomly place between 2 and 10 random sized rectangles.

Placing them is easy enough, but they must not overlap - which is where I am having the problem. Is there an algorithm I can use to make sure that the rectangles never touch or overlap?

I'm using jQuery and absolute positioned divs, no canvas or HTML5 of any kind.

Why not just keep an array of positions as you're generating them. If the next position is in the array, re-randomize.

It's just a bounding box collision detection. You need to keep an array of all your boxes and their sizes.