CSS li inline和jquery可排序

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>

For some odd reason:

<style>
#sortable { list-style-type: none;  }
#sortable li {float: left; }
</style>

This resolved the issue....