Droppable not going to correct spot

I have created an inventory that's styled and since I have added the styling in .css when items are placed back into the inventory they go below the existing items and ruins my box. How can I fix this? (they basically drop out of one of the borders and into a new one)

http://jsfiddle.net/BxPjC/

Note: removing itembox1, itembox3 and itembox4 seems to fix it however I lose my styling. What could I use to replace the divs used for styling.

function itemInSpot(drag_item,spot)
{
var oldSpotItem = $(spot).find('img');
if(oldSpotItem.length>100) {
oldSpotItem.appendTo('.inventholding').draggable({ revert: 'invalid' });
}
var item = $('<img />');
item.attr('src',drag_item.attr('src')).attr('class',drag_item.attr('class')).appendTo(spot)    .draggable({ revert: 'invalid' });
drag_item.remove(); // remove the old object
}

 $(document).ready(function() {
  $("img").draggable({ revert: 'invalid'});

$(".inventholding").droppable()
$("#pricebox").droppable({ accept: '.price'})
$('#pricebox').droppable({ accept: '.price'});
$('#pricebox,#pricebox,.inventholding').bind('drop', function(ev,ui) {      itemInSpot(ui.draggable,this); });

$('#clone_button').click(function() {
    $('#clone_wrapper div:#pricebox')
        .clone()
    .append('')
    .appendTo($('#clone_wrapper'));
})
});

<div id="container">

<body>
    <div id="clone_wrapper">
        <div class="right">
            <div id="pricebox" style="background: none; width:153px; padding:1px; height:auto; margin 1px; border:1px solid black; 
float:left;">
                <select name="qty">
                    <option value="Each" selected>Each</option>
                    <option value="All"> All</option>
                    <option value="Any 2">Any 2</option>
                    <option value="Any 3">Any 3</option>
                </select>
                <input id="coin" type="text" id="text" name="text_name" style="width: 35px; style=" height: 21px; " maxlength=3 /></h6></div>
</div></div>

<button id="clone_button ">New</button></div>
<div id='inventrightside1'><div id='inventrightside2'><p1><img     src="http://kennenmen.netai.net/images/invent1.png "/></p>

<div class="inventholding " clear:both;">
                <div id="itembox1">
                    <div id="itembox3">
                        <div id="itembox4">
                            <img src="http://images.lasuni.com/icons/lionhat_red.png"   class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/duckring_pink.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/cowboyhat_gold.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/halo_pink.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/cakehat_strawberry.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/ninjaeyemask_pink.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/carnivalmask_blue.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/alienhead_purple.png" class="price" alt="" />
                            <img src="http://images.lasuni.com/icons/skullhead_white.png" class="price" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>
</div>

Solution

In your JS change .inventholding to #itembox4

http://jsfiddle.net/tzDXq/