Jquery/CSS problem with my gallery.

Jquery/CSS problem with my gallery.

First of all I'd like to say hi, I'm a newbie jQuery user, and I've been tying to follow a tutorial which creates an image gallery, with two arrows each end of the actual gallery. The problem is when I try and view the gallery, the two controls appear above and below the gallery itself. And to the left of the page, as if they were on a new line. I was wondering if anything was wrong with the jQuery script or the CSS? Any help would be greatly appreciated. The code:

HTML:
<div id = "slideshow">
<div id="slidesContainer">
<img src="pic1.jpg" class="slide" />
<img src="pic2.jpg" class="slide" />
<img src="pic3.jpg" class="slide" />
<img src="pic4.jpg" class="slide" />
<img src="pic5.jpg" class="slide" />
</div>
</div>


CSS:
   
#slidesContainer{
  border: 3px solid white;}
   
#slideshow #slidesContainer {
  margin: 0 auto;
  width:500px;
  height:300px;
  overflow:auto;
}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:480px;
  height:300px;
}

.control {
  display:block;
  width:35px;
  height:35px;
  cursor: pointer;
}
#leftControl {
  background: transparent url(backbutton.jpg) no-repeat 0 0;
  top:0;
  left:0;
}
#rightControl {
  background: transparent url(forbutton.jpg) no-repeat 0 0;
  top:0;
  right:0;
}


and the jQuery:

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 500;
  var slides = $('.slide');
  var numberOfSlides = slides.length;


  $('#slidesContainer').css('overflow', 'hidden');


  slides
  .wrapAll('<div id="slideInner"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });

  $('#slideInner').css('width', slideWidth * numberOfSlides);

  $('#slideshow')
    .prepend('<span class="control" id="leftControl"></span>')
    .append('<span class="control" id="rightControl"></span>');

  manageControls(currentPosition);

  $('.control')
    .bind('click', function(){
    // Determine new position
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;

      manageControls(currentPosition);

      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });

  function manageControls(position){

    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }

    if(position==numberOfSlides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
    }
  });


I plan to learn from this code, but I want it to work before I can start.