Need Footer to Stick!!!

ok ok, so i have been working on this for about 2 hours now and it is driving me insane, just can't get this footer to stick to the bottom

Here is the CSS

* { margin: 0; padding: 0px; }

body,html {
margin: 0;
padding: 0px;
background: #fde428;
height: 100%;
}

#container, #main {
margin: 0 auto;
width: 960px;
background-color: #FFF;
min-height: 100%;
height: auto !important;
margin: 0 auto;
}


p {margin: 0; padding: 0px; }


/* LABELS AND FORMS */

label {font-weight: bold }

input#name {
width: 20em;
border: 1px solid #755a3c;
font: 10pt Arial, 'Trebuchet MS', Sans-Serif;
color: #755a3c;
}

textarea {
width: 20em;
height: 12em;
border: 1px solid #755a3c;
font: 10pt Arial, 'Trebuchet MS', Sans-Serif;
color: #755a3c;
}


input.button {
width: 6em;
font: bold 12pt Arial, Sans-serif;
color: #fff;      
background: #b50000;
padding: 2px 3px;
border: 1px solid #2E2E2E;
}

input#other {width:18em }


/* LABELS AND FORMS */


/* BACKGROUND */

.background {
background: #425c64 url('/images/bg.gif') repeat-x;
}

/* BACKGROUND */


/* HEADER */

#header {
background: url(/images/header.jpg) no-repeat;
height: 125px;
}

/* LOGO */
.logolink {
background-image: url('/images/logo.gif');
background-repeat: no-repeat;
height: 236px;
width: 115px;
}

.logolink a { float: left;  }

#swap {background-image: url(/images/logo.gif);  width: 236px;  height: 115px;  }

.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */
/* LOGO */


/* HEADER */

/* NAV */

#nav {
background: url(/images/nav_bg.gif) repeat-x;
height: 38px;
}

.images {
position: left;
}

.images a { float: left; }

#swap01 {background-image: url(/images/nav_products_on.gif);  width: 74px;  height: 38px; }
#swap02 { background-image: url(/images/nav_service_on.gif); width: 74px;  height: 38px; }
#swap03 { background-image: url(/images/nav_safety_on.gif); width: 56px;  height: 38px; }
#swap04 {background-image: url(/images/nav_contact_on.gif);  width: 92px;  height: 38px; }
#swap05 { background-image: url(/images/nav_catalog_on.gif); width: 122px;  height: 38px; }
#swap06 { background-image: url(/images/nav_landscape_on.gif); width: 160px;  height: 38px; }

.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */


#nav .end {
float: right;
background: url(/images/nav_kid.jpg) no-repeat;
width: 365px;
height: 38px;
}

/* NAV */

/* MAINGRAPHIC */

#maingraphic {
background: url(/images/maingraphic.jpg) no-repeat;
height: 186px;
}

#maingraphic p {
padding: 76px 308px 0px 40px;
font: bold italic 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #FFF;
}

/* MAINGRAPHIC */


/* MAIN */

#main {
font: 10pt 'Trebuchet MS', Arial, Sans-serif;
height: auto;
}

#main .leftside {
float: left;
margin: 15px;
width: 242px;
}

#main .leftside h1 {
background: url(/images/left_contact.gif) no-repeat;
height: 37px;
}

#main .leftside h2 {
background: url(/images/left_vendors.gif) no-repeat;
height: 37px;
}

#main .leftside p {
margin: 4px 0px 10px 0px;
padding: 10px;
background-color: #f1ebdf;
color: #a59662;
}

#main .vendors {
background: #f1ebdf url(/images/vendors.gif) no-repeat;
height: 93px;
}


#main .content {
float: right;
padding: 20px;
color: #86878b;
line-height: 19px;
width: 630px;
}

#main .content h1 {
font-size: 18pt;
font-weight: bold;
color: #4fc2f0;
letter-spacing: -1px;
}

/* MAIN */

/* FOOTER */

#wrapper {
  width: 960px;
  bottom: 0 !important;
  bottom: -1px; /* For Certain IE widths */
  height: 80px;
  clear: both;
}

#footer {
height: 80px;
background-color: #8cc63e;
padding: 10px;
color: #FFF;
}

#footer .asc {
font: 8pt 'Trebuchet MS', Arial, Sans-serif;
color: #FFF;
text-decoration: underline;
}

#footer .asc a {
font: 8pt 'Trebuchet MS', Arial, Sans-serif;
color: #dcffac;
text-decoration: underline;
}

#footer ul {
font: 8pt 'Trebuchet MS', Arial, Sans-serif;
display: inline;
}

#footer li {
display: inline;
padding: 10px;
}

#footer li a {
color: #dcffac;
}

/* FOOTER */
----------------------------------------------------------------

And here is the 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 runat="server">
<title>Alternative Designs</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
   
<div id="container">

<div id="header">
<p class="logolink">
<a href="#" id="swap" title="Alternative Designs LLC">
</a>
</p>
</div>

<div id="nav">

<div class="images">
<a href="#" id="swap01" class="rollover" title="Home"><img src="/images/nav_products_off.gif" border="0" alt="Home" width="74" height="38"></img></a>
<a href="#" id="swap02" class="rollover" title="Witt Liners News"><img src="/images/nav_service_off.gif" border="0" alt="Witt Liners News" width="74" height="38"></img></a>
<a href="#" id="swap03" class="rollover" title="Contact"><img src="/images/nav_safety_off.gif" border="0" alt="Contact" width="56" height="38"></a>
<a href="#" id="swap04" class="rollover" title="Home"><img src="/images/nav_contact_off.gif" border="0" alt="Home" width="104" height="92"></img></a>
<a href="#" id="swap05" class="rollover" title="Witt Liners News"><img src="/images/nav_catalog_off.gif" border="0" alt="Witt Liners News" width="122" height="38"></img></a>
<a href="#" id="swap06" class="rollover" title="Witt Liners News"><img src="/images/nav_landscape_off.gif" border="0" alt="Witt Liners News" width="160" height="38"></img></a>
</div>


<div class="end"></div>

</div>

<div id="maingraphic">
<p>
"Spontaneous play is the delicate dance of childhood that strengthens the mind and body, and
nourishes the soul."
 
"Play is our brain's favorite way of learning."
    <br />
    Diane Ackerman Contemporary American Author
    <br />
    <br />
    "The true object of all human life is play." G.K. Chesterton British Author 1874-1936</p>
</div>

<div id="main">
<div class="leftside">
<h1></h1>
<p>Alternative Designs
<br />
555 Unknown St.
<br />
Tulsa, OK 74111</p>

<h2></h2>
<p class="vendors">
</p>

</div>

<div class="content">
<h1>Welcome To Alternative Designs!</h1>
<br />
 <p>Nam lobortis. Curabitur facilisis tortor et justo. Phasellus et lorem. Cras urna
     ante, aliquam a, ultricies scelerisque, porta a, tellus. Cras mauris sapien,
     placerat non, molestie quis, imperdiet vestibulum, leo. Suspendisse vitae
     lectus. Aliquam nibh arcu, sagittis nec, ultrices eget, suscipit scelerisque,
     lorem. Nullam in dolor vestibulum sem vestibulum sagittis. Duis ut purus
     imperdiet nulla lobortis condimentum. In non dui eget elit iaculis accumsan. In
     hac habitasse platea dic<br />
 </p>

</div>
</div>  

<div id="wrapper">


<div id="footer">

<div class="asc">
<a target="_blank" href="http://aschosting.com">
Hosted by: Ambitious Web Hosting Company - Business Services</a><br>
<a target="_blank" href="http://ambitiousdesign.com">Site Created
by: Ambitious Design - A custom website design company</a><br>
</div>

<ul>
<li> <br />
 <a href="#">XHTML</a></li>
<li><a href="#">CSS</a></li>

</ul>

</div>

</div>

</body>
</html>

-----------------------------------------------------------------------------------
Any help on this or a solution would be great, otherwise i'm going to throw my comp out the window lol
thanks a ton in advance!
Start Free Trial