:-? Не знаю.
Я уже понял, что задавать фиксированные размеры width и height было глуповато . Что до примера ksa , то я не вижу как его тут применить? У него получается что создаваемые блоки не пересекаются друг с другом. У меня они просто не должны пересекаться с одним блоком .box, и создаваться во всем остальном пространстве

А друг с другом могут пересекаться?

ksa,
А можете сделать при таком условии?

Black_Star,
вариант решения проблемы динамических размеров: создавать слова и включать в DOM невидимыми, показывать только прошедшие проверку на непересекаемость
Или вообще не проверять - блок вынести вперед

Дык я при любых условиях могу сделать... :D
Просто вопрос смысла делать что-то бесплатно. Всегда есть некий компромисс между "интересно", "бесплатно" и "времязатратно"... В данном случае не так интересно, чтобы делать бесплатно задачку, которая займет достаточно много времени...
Наверное денек на нее уйдет, по моим прикидкам. А это 8 часов... Даже если брать по 1000р за час, вряд ли ТС оплатит кому-либо 8т.р. за рабочий макет по его нуждам. :D

Всем спасибо за подсказки. :thanks:
Придумал как решить данный вопрос разбив данный интервал на области видимости.
http://codepen.io/BlackStar1991/pen/bgGeqQ

Кому понадобится идея, такова.
1) Если случайное число по вертикале меньше чем верхняя точка блока или больше чем нижняя точка выводите текст как есть. (Учитывая размер шрифта)
2) Если по вертекали значение попадает в область блока (куда попадать не должно было) то пересчитывай горизонталь по формуле
RandomNumber = rand()%(100-(y-x));
if RandomNumber > x then RadomNumer +=(y-x);
Вообщем оно работает. :)
Есть конечно небольшие косяки, но результат меня устраивает :p