I am trying to use a jQuery content slider plugin I downloaded and it seems that the functions work, but the slider ends up in my header instead of between my first two separators. http://nivo.dev7studios.com/ is the plugin im using.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CampusTaps.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

<!--CONTENT SLIDER-->



</head>
<body>
<!--CONTAINER STARTS-->
<div id="container">
<!--HEADER/NAVIGATION STARTS-->
<div id="top">
<!--WEBSITE TITLE STARTS-->
<div id="title">
<h1><a href="#" title="CampusTaps.com">Your Website Name</a></h1>
</div>
<!--WEBSITE TITLE ENDS-->
<!--NAVIGATION STARTS-->
<div id="nav">
<ul class="nav-links">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Liquor Prices">Liquor Prices</a></li>
<li><a href="#" title="College Bars">College Bars</a></li>
<li class="borderx2"><a href="#" title="contact">contact</a></li>
</ul>
</div>
<!--NAVIGATION ENDS-->
</div>
<!--HEADER/NAVIGATION ENDS-->
<div class="separator">&nbsp;
</div>


<!--SEPARATOR STARTS-->
<div class="separator">&nbsp;
</div>

<!--SEPARATOR ENDS-->
<!--Content Area-->





<div id="slider">
<img src="images/CampusTapsLogo.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500, //Slide transition speed
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}, //Triggers after all slides have been shown
lastSlide: function(){}, //Triggers when last slide is shown
afterLoad: function(){} //Triggers when slider has loaded
});
});
</script>




<!--SIDEBAR STARTS-->
<div id="sidebar">
<h3>Updates</h3>
<ul class="sidebar-list">
<li>Site Launched</li>
<li>Lorem ipsum dolor sit amet, consectetur sit
adipiscding...</li>
<li>Lorem ipsum dolor sit amet, consectetur sit
adipiscding...</li>
</ul>
</div>
<!--SIDEBAR ENDS-->
<!--CONTENT STARTS-->
<div id="content">
<h2>Pictures from Events</h2>
<p>PICTURES PICTURES</p>
<p>PICTURES PICTURES</p>
<p>PICTURES PICTURES</p>
</div>
<!--CONTENT ENDS-->
<!--FOOTER STARTS-->
<div id="footer">
<p>Copyright &copy; 2010 <strong>CampusTaps Media Group</strong></p>
</div>
<!--FOOTER ENDS-->
</div>
<!--CONTAINER ENDS-->
</body>
</html>

CSS


* {
margin: 0px;
padding: 0px;
border: none;
}
body {
background-image: url(images/Body-bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #c8c8c8;
}
#container {
margin: auto;
width: 850px;
}
#top {
float: left;
width: 850px;
height: 119px;
}
#title {
float: left;
width: 278px;
height: 74px;
padding-top: 45px;
}
#title h1 {
display: block;
float: left;
width: 278px;
height: 74px;
text-indent: -9999px;
}
#title h1 a {
display: block;
width: 100%;
height: 100%;
background-image: url(images/campustapslogosmall.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
#navigation { float: right; }
.nav-links li {
display: block;
float: left;
list-style-type: none;
}
.nav-links li a {
float: left;
width: 120px;
height: 68px;
text-decoration: none;
text-transform: capitalize;
color: #666666;
font-size: 12px;
text-align: center;
padding-top: 51px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #cecece;
}
.nav-links li a:hover {
color: #ffffff;
background-position: center bottom;
}
li.borderx2 {
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cecece;
}


.separator {
background-image: url(images/separator.jpg);
background-repeat: no-repeat;
float: left;
height: 6px;
width: 960px;
margin-top: 20px;
margin-bottom: 20px;
}

.bx-pager a {
text-indent: -999999px;
}

h2 {
text-transform: uppercase;
color: #ffffff;
font-size: 16px;
margin-bottom: 15px;
}

.separator {
background-image: url(images/divider.jpg);
background-repeat: no-repeat;
float: left;
height: 6px;
width: 960px;
margin-top: 20px;
margin-bottom: 20px;
}
#sidebar {
float: left;
height: 209px;
width: 219px;
background-image: url(images/Updatesbox.jpg);
background-repeat: no-repeat;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 20px;
}
h3 {
text-transform: uppercase;
color: #ffffff;
text-align: center;
margin-bottom: 20px;
font-size: 12px;
}
.sidebar-list li {
list-style-type: none;
color: #2C5923;
margin-top: 10px;
padding-bottom: 10px;
background-image: url(images/divider.png);
background-repeat: repeat-x;
background-position: bottom;
}
#content {
float: right;
width: 560px;
height: 300px;
color:#2C5923;
background-image:url(images/Picscontent2.jpg);
background-repeat: no-repeat;
padding-top:20px;
padding-left:20px;


}
#content p { margin-bottom: 15px; }
#footer {
float: left;
width: 800px;
height: 50px;
margin-top: 10px;
padding-top: 25px;
text-align: center;
color: #000000;