CSS/jQuery Slider

[MrC]

Hi i'm trying to code a slider within the centre box and it layering over the top of the image.

This is coded within a HTML boilerplate, is this affecting what i am doing?

I'm wanting an effect like what i have on my current site http://www.markcoffeyphotography.co.uk but with a better slider

I'm redoing it with a boilerplate to learn best practice and so on. Its sitting over my divs like this http://www.markcoffeyphotography.co.uk/screenShot.png at the moment

My HTML mark up is here:

<div class="main_content">

<div class="header">

</div>


<div class="images">




<div id="slideshow">
<img src="img/1.jpg" alt="Slideshow Image 1" class="active" />
<img src="img/2.jpg" alt="Slideshow Image 2" />
<img src="img/3.jpg" alt="Slideshow Image 3" />
<img src="img/4.jpg" alt="Slideshow Image 4" />
</div>


<div class="spacer">
</div>


<div class="menu">
</div>


<div class="footer">
</div>



</div>


</div>


and the CSS is here


/* ==========================================================================
Styles for image fade wrapper
========================================================================== */


<!-- change size of div to image size -->


#slideshow {
width: 1040px;
height:650px;

}

#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}


/* ==========================================================================
My Styles ========================================================================== */


div.main_content {
float:left;
align:left;
width:1040px;
height:auto;
color: white;
margin:0px;
padding:0px;
}

div.header {
float:left;
align:left;
width:1040px;
height:120px;
color: white;
margin:0px;
padding:0px;
}

div.spacer {
align:left;
float:left;
width:1040px;
height:120px;
color: white;
margin:0px;
padding:0px;
}

div.images {
float:left;
align:left;
width:1040px;
height:650px;
color: white;
margin:0px;
padding:0px;
}

div.menu {
float:left;
align:left;
width:300px;
height:460px;
color: white;
margin-left:70px;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
padding:0px;
}

div.footer {
float:left;
align:left;
width:970px;
height:70px;
color: white;
margin-left:70px;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
padding:0px;
}

I'd really appreciate any help, i'm pretty new to coding.