Since I can't master the subject, I'm not sure if it's CSS or JS related. Here's my problem; I have a script to upload, crop and save image. The problem is I want to put the thumbnail preview under the image but I can't. Here are the codes:

These are in the head part
HTML Code:
<script type="text/javascript" src="js/jquery-pack.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
HTML Code:
<script type="text/javascript">

function preview(img, selection) { 
	var scaleX = 100 / selection.width; 
	var scaleY = 100 / selection.height; 
	$('#thumbnail + div > img').css({ 
		width: Math.round(scaleX * 500) + 'px', 
		height: Math.round(scaleY * 375) + 'px',
		marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
		marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
	});
	$('#x1').val(selection.x1);
	$('#y1').val(selection.y1);
	$('#x2').val(selection.x2);
	$('#y2').val(selection.y2);
	$('#w').val(selection.width);
	$('#h').val(selection.height);
} 

$(window).load(function () { 
	$('#thumbnail').imgAreaSelect({ aspectRatio: '16:9', onSelectChange: preview }); 
});
</script>
This is in the body part
HTML Code:
<div align="center">
			<img src="resized_pic.jpg" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
			<div style="float:left; position:relative; overflow:hidden; width:160px; height:90px;">
			<img src="resized_pic.jpg" style="position: relative;" alt="Thumbnail Preview" />
			</div>
</div>
How can I possibly put the Thumbnail Preview under Create Thumbnail?