Im having a few troubles with my javascript, can anybody help?

In my page http://www.1pw.co.uk/demo3.html

Im dropping images into a div named "bowlpic"

If I drop more than 4 images into the div, the images begin to overflow the div. opposed to starting a new line as text normally would.

Is there a way around this?

Ive tried playing around with the inline styles embedded into the script

ie.
$('.bowlpic').append('<img style="width: 50px; position: fixed; float: left; etc

Im fairly new to javascript so any help would be really appreciated!


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>Drag and Drop Demo</title>
	<link rel="stylesheet" type="text/css" href="main.css">
	<link rel="stylesheet" type="text/css" href="icon.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="jquery.ui.main.js"></script>
	<style type="text/css">
		.products{
			list-style:none;
			padding:0px;
			height:100%;
		}
		.products li{
			display:inline;
			float:left;
			margin:10px;
		}
		.item{
			display:block;
			text-decoration:none;
		}
		.item img{
			border:1px solid #333;
		}
		.item p{
			margin:0;
			font-weight:bold;
			text-align:center;
			color:#c3c3c3;
		}
		.cart{
			position:fixed;
			right:0;
			top:0;
			width:300px;
			height:100%;
			background:#ccc;
			padding:0px 10px;
		}
		.bowlpic {
	height:300px;
	width:260px;
	overflow:none;
	background-image:url(bowl.jpg);
	background-repeat:no-repeat;
	background-color:#FF0000;
	float:left;
	text-align: left;
		}
		h1{
			text-align:center;
			color:#555;
		}
		h2{
			position:absolute;
			font-size:16px;
			left:10px;
			bottom:20px;
			color:#555;
		}
		.total{
			margin:0;
			text-align:right;
			padding-right:20px;
		}
		#productpics {
			height:300px; width:1000px;
		}
		#arrow {height:300px; width:300px; float:left;
		}
	</style>
	<script>
		var data = {"total":0,"rows":[]};
		var totalCost = 0;
		var bowlItems = 10;
		
		$(function(){
$('#cartcontent').datagrid({
	singleSelect:true
                                         });
$('.item').draggable({
	revert:true,
	proxy:'clone',
	onStartDrag:function(){
		$(this).draggable('options').cursor = 'not-allowed';
		$(this).draggable('proxy').css('z-index',10);
				},
	onStopDrag:function(){
	$(this).draggable('options').cursor='move';
			     }
			});
			$('.bowlpic').droppable({
		onDragEnter:function(e,source){
                              $(source).draggable('options').cursor='auto';
				                     },
				onDragLeave:function(e,source){
					$(source).draggable('options').cursor='not-allowed';
				},
				onDrop:function(e,source){
					var name = $(source).find('p:eq(0)').html();
					var price = $(source).find('p:eq(1)').html();
					addProduct(name, parseFloat(price.split('')[1]));
					bowlItems = bowlItems + 50;
					$('.bowlpic').append('<img style="width: 50px; position: fixed; float: left; margin-left:'+ bowlItems +'px;" src="' + $(source).children().attr('src') +'"/>');
				}
			});
		});
		
		function addProduct(name,price){
			function add(){
				for(var i=0; i<data.total; i++){
					var row = data.rows[i];
					if (row.name == name){
						row.quantity += 1;
						return;
					}
				}
				data.total += 1;
				data.rows.push({
					name:name,
					quantity:1,
					price:price
				});
			}
			add();
			totalCost += price;
			$('#cartcontent').datagrid('loadData', data);
			$('div.cart .total').html('Total: '+totalCost);
		}
	</script>
</head>
<body style="margin:0;padding:0;height:100%;background:#fafafa;">
<div id="productpics">
	<ul class="products">
		<li>
			<a href="#" class="item">
				<img src="shirt1.gif"/>
				<div>
					<p>Balloon</p>
					<p>Price:25</p>
				</div>
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<img src="shirt2.gif"/>
				<div>
					<p>Feeling</p>
					<p>Price:25</p>
				</div>
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<img src="shirt3.gif"/>
				<div>
					<p>Elephant</p>
					<p>Price:25</p>
				</div>
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<img src="shirt4.gif"/>
				<div>
					<p>Stamps</p>
					<p>Price:333</p>
				</div>
			</a>
		</li>
		<li>
			<a href="#" class="item">
				<img src="shirt5.gif"/>
				<div>
					<p>Monogram</p>
					<p>Price:25</p>
				</div>
			</a>
		</li>
	</ul>
    </div>
	<div class="cart">
		<h1>Shopping Cart</h1>
		<div style="background:#fff">
		<table id="cartcontent" fitColumns="true" style="width:300px;height:auto;">
			<thead>
		     <tr>
		<th field="name" width=140>Name</th>
		<th field="quantity" width=60 align="right">Quantity</th>
		<th field="price" width=60 align="right">Price</th>
		     </tr>
			</thead>
		</table>
		</div>
		<p class="total">Total: 0</p>
	</div>
    <div class="bowlpic"></div>
<div id="arrow"><p>drag to here</p></div>
</body>
</html>