jQuery UI Draggable Droppable DIV Width Expanding on Drop

[sdellka]

Hi I made a drag and drop so I could drag search results from itunes api to a div so I can store that data to mydatabase but when I drop my div in my drop box the width of my drop box expands like 600px, can anyone see if anything is wrong in my code, thanks alot in advance, this is driving me crazy!jQuery\[code\]$(".draggable").draggable({ helper: 'clone' }); $("#cart").droppable({ accept: '.draggable', drop: function(event, ui) { $(this).append($(ui.helper).clone()); $("#cart .draggable").addClass("item"); $(".item").removeClass("ui-draggable draggable"); $(".item").draggable(); } }); });\[/code\]PHP\[code\]<section class="row"> <div class="column eight"> <div id="cart"></div> </div><aside class="column four"> <form method="post"> <input type="text" name="term"> <input type="submit" value="http://stackoverflow.com/questions/15584538/Go"> </form> <?php if(isset($_POST['term'])) { $term = urlencode($_POST['term']); $json = file_get_contents('http://itunes.apple.com/search?term='.$term.'&limit=1&media=software&enity=software'); $array = json_decode($json, true); $i = 1; foreach($array['results'] as $value) { ?> <div class="draggable"> <img src="http://stackoverflow.com/questions/15584538/<?php echo $value['artworkUrl60'] ?>" alt=""> <h2><?php echo substr($value['trackName'],0,20); ?></h2> <p><?php echo $value['artistName']; ?></p> <p><?php echo substr($value['description'],0,55)."..."; ?></p> </div> <?php } }?> </aside></section> \[/code\]CSS\[code\]body { font: 300 62.5% "Open Sans"; line-height: 1.5;}h2 { font-size: 1.4em; text-transform: uppercase; }p { font-size: 1.2em;}img { display: block; float: left;}li { display: inline-block;}input, select, textarea { border: .1em solid #CCC; font: 300 1.4em "Open Sans"; -webkit-transition: border .5s ease; -moz-transition: border .5s ease; -o-transition: border .5s ease; transition: border .5s ease;}input, select { margin: 0 1em 1em 0; padding: .5em; width: 25em;}input[type="submit"] { width: 15em; margin: 1em 0;}textarea { padding: .5em; max-width: 100%; width: 65em; height: 15em; }/* Layout */*,*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.row { margin: 0 auto; width: 96em; zoom: 1;}.row .row { width: auto;}.row:before, .row:after { display: block; visibility: hidden; height: 0; content: "\0020"; }.row:after { clear: both;}.column { position: relative; display: inline; float: left; padding: 1em ;}.column .column { padding: 0;}.one { width: 8.33333%;}.two { width: 16.66667%;}.three { width: 25%;}.four { width: 33.33333%;}.five { width: 41.66667%;}.six { width: 50%;}.seven { width: 58.33333%;}.eight { width: 66.66667%;}.nine { width: 75%;}.ten { width: 83.33333%;}.eleven { width: 91.66667%;}.twelve { width: 100%;}@media only screen and (max-width: 480px) { .row { width: 48em;} .column { width: 100%;}}.icon { background: url(../images/theme/icons-sprite-16.png) no-repeat; width: 1.6em; height: 1.6em; display: inline-block; overflow: hidden; margin: 0 .2em 0 0;}.move { background-position: -128px -48px; cursor: move; }.edit { background-position: -64px -112px;}.delete { background-position: -80px -128px;}div[id^="page_"] { background: #F5F5F5; margin: 0 0 .5em; cursor: default;}.draggable { margin: 0 0 1em;}.draggable img { width: 84px; height: 84px; float: left; margin: 0 1em 1em 0;}#cart { outline: solid #CCC 1px; min-height: 100px;}\[/code\]