CSS li inline & jquery sortable - php

Question

having an issue with the jquery sortable code - it's not so much the jquery but how my list of images is showing. Prior to adding the sortable code it displayed the images in my wrapper in a grid like formation perfectly - now I have added a little style from the jquery it seems to have thrown it but im not sure why...
here is the Jquery style:
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li {float: left; }
</style>
Here is my list of images that worked perfectly ok before:
<div id="images">
<hr style="margin-top: 10px" />
<ul id="sortable">
<?php
// get folio for user
if(isset($_GET['userid'])) {
$query = 'SELECT * FROM folio WHERE userid=\'' . $_GET['userid'] . '\' ORDER BY ord';
}
else {
$query = 'SELECT * FROM folio WHERE userid=\'' . $_SESSION['userid'] . '\' ORDER BY ord';
}
$result = mysqli_query($connection, $query);
if(!$result) {
// error with MYSQL
die('Failed to retrieve images! - ' . mysqli_error($connection));
}
// list images
$numRows = mysqli_num_rows($result);
if($numRows < 1) {
echo '';
}
else {
$filepath = 'uploads/folio/';
while($imagerow = mysqli_fetch_assoc($result)) {
?>
<li>
<div class="outimgbox"> <a class="fancybox fancybox.ajax" rel="gallery1" style="text-decoration: none;" data-fancybox-type="ajax" href="profile_image_fancybox.php?imgid=<?php echo $imagerow['imgid']; ?>">
<div id="mainwrapper">
<div id="box-3" class="box"> <img class="uploads" src="<?php echo $filepath . $imagerow['filename']; ?>" alt="<?php echo $imagerow['description']; ?>"/> <span class="caption fade-caption">
<h3 ><?php echo $imagerow['title']; ?></h3>
</span> </div>
</div>
</a> </div>
</li>
<!-- class outingbox -->
<?php }} ?>
</ul>

Answer 1

For some odd reason:
<style>
#sortable { list-style-type: none; }
#sortable li {float: left; }
</style>
This resolved the issue....