Probleme avec background

Bonjour

Premierement merci pour ce site qui m'a beaucoup servi a aprendre comment faire des differents choses

Malheureusement en ce moment j'ai un bug que je n'arrive pas a corriger et cela fait deux jours que j'essaie de trouver la reponse...

j'ai reussi a faire ma page principale et le probleme est la couleur de fond.

ça marche bien mais quand la page est plus longue que les autres, le contenu est plus long la couleur de fond s'arrete a l'hauteur de la fin du premier ecran....

je n'arrive pas a faire que cette couleur de fond prenne le 100% d'hauteur...et j'aimerais bien avoir le footer en bas qui se trouve en ce moment en haut...mais il bouge un peu bizarrement

voici deux images
http://img187.imageshack.us/img187/5066/52435402kr6.jpg normalement les pages sont comme ça...mais quand la page est plus longue ça donne ceci:
http://img187.imageshack.us/img187/4056/52926172yw5.jpg et je voudrais que le blanc continue mais seulement au millieu

voici le code peut etre vous trouverez ou c'est l'erreur! merci!!!!

@charset "utf-8";
/* CSS Document */

/* voici le fond du site*/

#background {
			position: absolute; background-color:
			#CCCCCC; width:100%; height:auto; top:0%; left:0px; right:0px; bottom:0%;   
			
}

/* Ceci contient toutes les sections du site */

#container { background-color:#FFFFFF; position: absolute ;top:0%; bottom:0%; border-left:#999999 thick; border-right:#999999 thick; width:56%; left:18%; }

html>body #container { color: #FF3300;
    height: auto;
}

/* le contenu principal va ici */
#contenu { position:absolute ; top: 21%;  width:60%;  left: 5% ; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-align:justify; height:auto; }

/* gestion de couleurs de textes et tailles dans les sections de contenu */

#contenu {font-size:12px; color:#666666; margin-left:15px; text-align:justify;}
#contenu .small {font-size:10px; text-align:justify;}
#contenu .italic {font-style:italic;}
#contenu .bold {font-weight:bold;}
#contenu .small_bold {font-weight:bold; font-size:10px; color:#000000; text-align:justify;}



/* ceci gere le logo de la compagnie */
#logo {position: absolute ; top:2%; left:5%; 
	}
a img {border: 0;}

/* ceci gere les cordonnées de la societe */
#societe {float:right; text-align:right; font-style:normal; font-family:Arial, Helvetica, sans-serif; font-size:10px;
		position: absolute; top: 5%; left: 83% ;
		}

/* ceci gere la barre de navigation du site */
#nav ul {margin:0 auto; padding:0; list-style:none; display:table; white-space:nowrap; font-family: arial, verdana, sans-serif; font-size:11px;}
#nav li {display:table-cell; margin:0; padding:0;}
#nav a {float:left; color:#000; background: #ccc url(../images/top_left.gif) no-repeat left top; margin:0 2px 0 0; padding:0 0 0 2px; text-decoration:none; letter-spacing:1px;}
#nav a b {float:left; display:block; background:transparent url(../images/top_right.gif) no-repeat right top; padding:5px 16px 5px 12px;}
#nav a:hover {background: #3a73ba url(../images/top_left.gif) no-repeat left top; color:#fff; cursor:pointer;} 
#nav .current a {background: #3a73ba url(../images/top_left.gif) no-repeat left top; color:#fff; cursor:default;} 
 #nav {position: absolute; 
  top: 15%; left: 5% ;}


#nav ul {display:inline-block;}
#nav ul {display:inline;}
#nav ul li {float:left;}
#nav {text-align:center;}

 /* le footer est le petit menu qui en general se trouve tout en bas */
      #footer {
        position: relative;
        width: 50%;
		height:3%;
        bottom: 0%;
        left: 53%;
		font-family: Arial, Helvetica, sans-serif;
		font-size:10px;
		font-style:normal;
		color: #96c71c;
      }

/* voici la section du cote et ses bords ronds */
.curvy {position:absolute; left: 77%; width:17%; top:12%; background:#3a73ba; color:#FFFFFF; margin:5em auto;}

#cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;   bottom:0; right:0;}
#ctr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;  top:0; right:0;}
#cbl {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;  bottom:0; left:0;}
#ctl {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;  top:0; left:0;}

.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#3a73ba; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-style:normal;}

/* ceci gere les formulaires  */
label {
display:block;
width:150px;
float:left;
text-align:left ;
}


 /* voici ce qui fait que les images peuvent être a droite ou gauche dans les sections ainsi que le iframe de google */
#leftimg img {margin:15px; float:left;}
 
#rightimg img {margin:15px; float:right;}
#rightimg iframe {margin:15px; float:right;}

			

et ça donne ça quand le site marche:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="fr" lang="fr">
<head>
<style type="text/css">
@import "css/main.css";
</style>
<meta name="robots" content="all" />
<meta name="keywords" content="HTML, HyperText Markup Language, Validation,
      W3C Markup Validation Service" />
    <meta name="description" content="W3C's easy-to-use
      HTML validation service, based on an SGML parser." />
  <title>ssqdsqsqdsq</title>
</head><body>
<div id="background">
<div id="container">
  

<div id="logo"> 
<a href="http://www.siteweb.com/"> <img src="images/logo.png" alt="site" />
</a></div>
<div id="societe">
details de la compagnie ici
</div>
<div id="nav">

<ul>
<li class="current"><a href="index.php"><b>Accueil</b></a></li>
<li><a href="index.php?page=produit"><b>sdsds</b></a></li>
<li><a href="index.php?page=evaluation"><b>Version d'evaluation</b></a></li>
<li><a href="index.php?page=documentation"><b>Documentation</b></a></li>
<li><a href="index.php?page=abones"><b>Espace Abonés</b></a></li>
<li><a href="index.php?page=societe"><b>La Soci&eacute;t&eacute;</b></a></li>
<li><a href="index.php?page=contacte"><b>Contacte</b></a></li>
</ul>
</div>


  <br  /><div id="contenu"><img src="images/sqdsqdsq.gif" alt="ssqdsq" /><br /><br />
<p>Le premier menu permet de cr&eacute;er les fichiers de r&eacute;f&eacute;rence adapt&eacute;s &agrave; votre activit&eacute;.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tincidunt sagittis nunc. Pellentesque in massa sed felis porta pharetra. Duis vel orci. Nulla diam ante, fermentum tristique, gravida et, luctus eget, erat. Proin dapibus. Proin ut turpis ac dui varius volutpat. Aliquam erat volutpat. In orci. Morbi ac ipsum eu quam aliquet vehicula. Curabitur pede. Proin luctus, velit ut mattis venenatis, libero ligula fringilla pede, sit amet tempor risus ante in neque. Aenean ullamcorper, orci et pulvinar facilisis, arcu ante varius lorem, eget tristique sem sapien a odio. Fusce feugiat nulla ut ipsum. Pellentesque porttitor lectus ac sapien. Fusce posuere lectus a turpis. Fusce posuere justo at felis..<br />
</p>
<br />
<p><span class="bold">sdsdsqdsqsqd:</span></p>
<p>texte ici</p>
 </div>
    
<div class="curvy">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tincidunt sagittis nunc. Pellentesque in massa sed felis porta pharetra. Duis vel orci. Nulla diam ante, fermentum tristique, gravida et, luctus eget, erat. Proin dapibus. Proin ut turpis ac dui varius volutpat. Aliquam erat volutpat. In orci. Morbi ac ipsum eu quam aliquet vehicula. Curabitur pede. Proin luctus, velit ut mattis venenatis, libero ligula fringilla pede, sit amet tempor risus ante in neque. Aenean ullamcorper, orci et pulvinar facilisis, arcu ante varius lorem, eget tristique sem sapien a odio. Fusce feugiat nulla ut ipsum. Pellentesque porttitor lectus ac sapien. Fusce posuere lectus a turpis. Fusce posuere justo at felis. 
</p>
</div>   
<div id="footer"><a href="index.php?page=societe">Copyright dsdsdsq</a> |<a href="index.php?page=plandusite">Plan du site</a></div>
</div>
</div>   
</body>
</html>