Footer isn’t behaving! -.-

Hi all just wondering if someone could help… i know im doing something stupid and overlooking it but i sorta have to figure this out pretty quick so i thought it might be easier to paste it on here

Basically only half the footer is showing… i know this is because its on the middle div tags (set to 610px) but its the only way i can get it to stick down the bottom of the page…

CSS:

[QUOTE]

body {
font-family: Arial, Helvetica, serif;
font-size: 26px;
color: #000000;
}
img
{
border-style: none;
}

#wrapper {
margin-left: auto;
margin-right: auto;
width: auto;
}

#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}

#header {
background: url(“images/header.jpg”) repeat-x;
height: 200px;
width: auto;
margin-right: -10px;
margin-left: -10px;

}

#contentmiddle {
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
width: 610px;
height: auto;
font-family: Arial, Helvetica, serif;
font-size: 14px;
text-align: left;
color: #000000;
float: left;
}

#contentleft {
background-color: #F3F3F3;
position:relative;
top: 50px;
border:2px solid #F3F3F3;
-moz-border-radius:15px; /* Firefox */
border-radius:15px;
width: 295px;
height: auto;
font-family: Arial, Helvetica, serif;
font-size: 12px;
text-align: left;
color: #000000;
float: right;
padding: 10px;
}

#footer {
background: url(“images/footer.jpg”) no-repeat;
font-family: Arial, Helvetica, serif;
font-size: 10px;
text-align: center;
color: #000000;
margin-left: auto;
margin-right: auto;
}

#menu {
margin-left: auto;
margin-right:auto;
width: 960px;
}

.menuitem {
margin: auto;
padding: 20px 0 0 10px;
text-decoration: none;
font-family: Arial, Helvetica, serif;
font-size: 16px;
text-align: right;
color: #000000;
}

.menu li {
min-width: 130px;
max-height: 51px;
}

.menu a {
margin-left: -25px;
margin-right: 10px;
padding: 0px 20px 0px 20px;
width: 130px;
}
.menuitem a:visited { text-decoration: none; }
.menuitem a:active { text-decoration: underline; }
.menuitem a:hover { text-decoration: underline; }

[/QUOTE]

HTML:

[QUOTE]

<div id=”wrapper”>
<div id=”header”>

<div id=”menu”>
<a href=”index.html” class=”menuitem”>Home</a><span style=”color: #FFFFFF;”> &nbsp; | </span>
<a href=”programming.html” class=”menuitem”>Programming</a><span style=”color: #FFFFFF;”> &nbsp; | </span>
<a href=”digitalmedia.html” class=”menuitem”>Media Design</a><span style=”color: #FFFFFF;”> &nbsp; | </span>
<a href=”databasedesign.html” class=”menuitem”>Database</a><span style=”color: #FFFFFF;”> &nbsp; | </span>
<a href=”webdevelopment.html” class=”menuitem”>Web Dev</a><span style=”color: #FFFFFF;”> &nbsp; | </span>
<a href=”resume.html” class=”menuitem”>Resume</a><span style=”color: #FFFFFF;”> &nbsp; | </span>
</div>
</div>
<div id=”container”>
<div id=”contentmiddle”>
<h1> Header </h1>
<br/>
<p> Paragraph 1 </p>
<p> Paragraph 2</p>
<p> Paragraph 3</p>
<p> Paragraph 4</p>

<div id=”footer”>
<br/>
<p> &copy copywrite information goes here <br /> other details go down here, like year and developer information</p>
</div>

</div>
<div id=”contentleft”>
<p> test content </p>
</div>

</div>
</div>[/QUOTE]

Thanks Heaps ? ill keep playing with it too and see if i can come up with anything

Also in #CSS _↴