I'm trying to insert the left and right controllers on the two ends of my slideshow div via the DOM such that they mirror each other on the opposite ends of the slideshow div

So far I've only gotten them either to display in the top corners of the browser window (Using top: 0; left: 0 and top: 0; right: 0 for the right and left controller id's style formatting) or where the left controller displays where it should, but the right controller displays directly below the left controller rather than on the opposite side of the slideshow div (I did this by changing the right and left controller styles to float instead of declaring vertical and horizontal positions)

I feel like it might have something to do with the styling, but I could be horribly wrong. Anyone have any ideas?

HTML:

HTML Code:
<div id="pageContainer">

 <!-- Slideshow HTML -->
  <div id="slideShow" style="border-style: solid; border-color: red; border-width: 1px;">
    <div id="slidesContainer" style="border-style: solid; border-color: yellow; border-width: 1px;">

      <div class="slide">

        <h2>Web Development With PHP</h2>
        <p><a href="#"><img src="newphp.JPG" alt="Screen capture of PHP built website" width="215" height="145" /></a></p>

      </div>

      <div class="slide">

        <h2>Database Design with MySQL Workbench</h2>
        <p><a href="file:///C:/Users/Owner/Documents/IRWireframe/experience.html#test"><img src="Patient_Database_Snapshot.JPG" width="215" height="145" alt="MySQL Workbench Database Design Snapshot" /></a></p>

      </div>

      <div class="slide">

        <h2>Web Design With CSS and HTML</h2>
        <p><a href="#"><img src="webdesign.JPG" width="215" height="145" alt="Screen capture of Brian Houlhan's CSS webpage" /></a></p>

      </div>
    </div>

  </div> 
  <!-- Slideshow HTML -->

  </div>
CSS:
Code:
/*
 * Slideshow style rules.
 */
#slideShow {
    margin:0 auto;
    width:640px;
    height:263px;
    background:transparent url(bg_slideshow.jpg) no-repeat 0 0;
    position:relative;
}
#slideShow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideShow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:263px;
}

/** 
 * Slideshow controls style rules.
 */
.control {
  display: block;
  width: 39px;
  height:263px;
  text-indent:-10000px;
  position: absolute;
  cursor: pointer;
}
#leftControl {
  float: left;
  /*
  top: 0;
  left: 0;
  */
  background:transparent url(control_left.jpg) no-repeat 0 0;
}
#rightControl {
 float: right;
 /*
 top: 0;
 right: 0;

*/
  background:transparent url(control_right.jpg) no-repeat 0 0;
}
Javascript (Running from HTML file):
Code:
// Insert controls in the DOM
  $('#slideShow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');