stretch the arrows to fit?

The arrows look great but I can't figure out how to get the div to stretch when there are only a few images.  here's an example: http://www.creativemusicphotography.com/?p=96

and the code:

      /**
      * start output
      */
      $output = "<!-- begin simple scrollbar gallery -->\n      <div class='gallery' align='center' style='position:relative; z-index:1;'>\n";

      /**
      * first big image
      */
      $output .= "      ".wp_get_attachment_image(key($attachments),"large")."\n";

      /**
      * thumbnails
      */
      $output .= "      <div class='gallery-list'><div style='position:absolute;z-index:100;left:0px;margin-left:-10%;top:340px;width:116%;height:100px;background-color:transparent;'><img src='http://www.creativemusicphotography.com/wp-content/themes/f8-lite/images/left_purple_arrow.jpg' align='left'><img src='http://www.creativemusicphotography.com/wp-content/themes/f8-lite/images/right_purple_arrow.jpg' align='right'></div><br>\n";
      foreach ( $attachments as $id => $attachment ) {
            $big_image = wp_get_attachment_image_src($id, 'large'); // url of big image
//            $thumbnail_image = wp_get_attachment_image_src($id,"thumbnail"); // url of thumbnail
            $output .= "            <a href=\"".$big_image[0]."\">\n";
            $output .= "                        ".wp_get_attachment_image($id,"thumbnail")."\n";
            $output .= "            </a>\n";
      }
      $output .= "      </div></div>\n";

      /**
      * end output
      */
      $output .= "<!-- end simple scrollbar gallery -->\n";