How to position two buttons on top of div element inside a div container?

Question

Hello!
Good news...
I have created my very first thumbnail slider for my website that actually works!
Bad news...
The buttons that help scroll the div element, which is wrapped inside a center container, are no longer positioned on top of the div.
Here is the html:
<div id="centerContainer">
<div id="aemcSlider">
   <ul>
    <li>
        <a class="aemcPkgBut" href="" target="" alt="AEMC Packaging" title="AEMC Packaging"> </a>
        </li>
        <li>
         <a class="aemcGroundFlexBut" href="" target="" alt="GroundFlexAd" title="GroundFlex Ad"> </a>
         </li>
     <li>
      <a class="aemcClampBut" href="" target="" alt="Clamp-On Ad" title="Clamp-On Ad"> </a>
      </li>
          <li>
          <a class="aemcMetrixBut" href="" target="" alt="Metrix Ad" title="Metrix Ad"> </a>
          </li>
     </ul>
</div>
<div id="leftBut">
<a class="arrowLeft" href="" target="" alt="Left" title="Left"> </a>
</div>
<div id="rightBut">
<a class="arrowRight" href="" target="" alt="Right" title="Right"> </a>
</div>
</div>
Here is the CSS:
Main container:
#centerContainer
{width: 800px; margin: 0 auto; background-color:#0e210e; position:relative}
Div Element:
#aemcSlider
    text-align:center;
    list-style:none;
    width: 450px;
    height: 114px;
    margin: 0 auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    top: 67px;
    position: relative;
    overflow: hidden;
#aemcSlider a {margin-right: -12px;}
Left & Right Buttons:
a.arrowLeft
    width: 29px;
    height: 96px;
    float:left;
    position:absolute;
    margin: 0 auto;
    display: block;
    background-image: url(../Images/arrowLeft.png);
    background-repeat: no-repeat;
    left: 311px;
    top: 91px;
    opacity: 0;
a.arrowLeft:hover
background-image: url(../Images/arrowLeft.png);
opacity: 0.5;
a.arrowRight
    width: 29px;
    height: 96px;
    position:absolute;
    float:right;
    margin: 0 auto;
    display: block;
    background-image: url(../Images/arrowRight.png);
    background-repeat: no-repeat;
    opacity: 0;
    left: 720px;
    top: 92px;
a.arrowRight:hover
background-image: url(../Images/arrowRight.png);
opacity: 0.5;
Here are the things I've done to troubleshoot:
If I put the div element as an absolute container, the left button disapears.
I get the same effect when I change the position to relative.
I tried changing the position to relative for both buttons.
I also tried to position the buttons outside the Main Div container and no go.
How can I position the relative div element under these controller button?
Any help would be muchly appreciated.
~LA

Answer 1

OK,
Got the site onto a public web space.
Here sre the links...
http://www.aliciaalmeidagraphicdesigner.com/Work.html
http://www.aliciaalmeidagraphicdesigner.com/style/Body.css
http://www.aliciaalmeidagraphicdesigner.com/js/functions.js
Anyone can help me out, please?
Thanks!
LA
PS: Dissapointed...my website looks much better from my local file than remote