Arranging floats positioned relative to wrapper, new line for overlaps

Arranging floats positioned relative to wrapper, new line for overlaps

Okay, it's hard to explain this problem in the title. Basically each list
items is floated a certain percentage relative to the overall unordered
list. This works if you keep each list item on a separate line. However to
save space I want to show items on the same line as long as they dont
overlay. Obviously I could just position absolutely but this results in
overlaps. Im struggling to come up with any idea how to do this.
I have a fiddle created to show the problem - http://jsfiddle.net/K5j4J/
The way I have it also used javascript to set the left amount, although
hardcoded in the fiddle
jQuery(this).children('.holder').css("left", leftpos );