Stumped!!! Making a multi-column unordered list on drag and drop script

[jamespaulphotography]

Hello,

 

I am attempting to modify a script from the dhtmlgoodies.com website (http:///www.dhtmlgoodies.com/scripts/drag-drop-nodes/drag-drop-nodes-demo3.html) to create a custom calendar solution. My idea is to give the user a choice of 68 images in which they drag and drop one into each month plus a cover image. Unlike the example, I have used images instead of text boxes in the DragDropContainer and thus a list of 68 images (in a one column unordered list) is a lot of pixels on the page and not really conducive to an easy to use solution (I have explored the overflow options but dont want a scrollbar on the page). I therefore wish to create 4 columns of 17 images but have run into problems. If I create four seperate div's with 17 images in I lose 3 of the 13 separate containers in my MainContainer. Also, if I create 2 columns I lose 1 container and again if I create 3 columns I lose 2 containers.

 

I am looking for a solution that allows me to break up my DragDropContainer div into 4 columns whilst not losing any of my 13 containers.

 

I have posted two pages on my site, please view. The first (http://www.jamespaulphotography.co.uk/developmentcalendar.html) shows the the page layout with all the pallet images in one div, one column. It does overflow. Images can be dragged into all months with no problem. The second page (http://www.jamespaulphotography.co.uk/developmentcalendar2.html) is my attempt at using 4 divs to create the 4 columns. If you try and place an image inside October, November or December months in the MainContainer it will not take. I have also explored the option of trying to remove the unordered list and use positioning for each individual images without success.

 

Any help/suggestions is really appreciated as I am now stumped!!!. All the CSS, Javascript etc is in the one file and I hope that I haven't confused the issue even more.