Problema con altura y background image

Buenas dmtkos, ando a las puteadas con un fucking problema q tengo en FF...
Estoy diseñando un sitio de mis remeras y tengo el siguiente problema.Por un lado tengo el header que esta todo ok, por otro el footer ,que esta todo ok, pero el continer quiro que tenga el 100% de la altura y no la respeta, como tampoco el pattern del background.
La cosa es que cuando coloco unas imagenes dentro del conteiner se acomodan una abajo de la otra pero no se repite el background, queda con una altura fija de unos cuantos pixeles y no puedo hacer que se vea bien.

El codigo que estoy utilizando es el siguiente.
<code>#header {
MARGIN: 0px auto;
WIDTH: 830px;
HEIGHT: 221px;
background-image: url("banner.jpg");
}
#container {
width: 830px;
margin-right: auto;
margin-left: auto;
background-image: url("main.jpg");
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
#footer {
margin: 0px auto;
width: 830px;
height: 68px;
background-image: url("footer.jpg");
background-repeat: no-repeat;
background-position: center;
}
.remeras1{
width: 281px;
height: 300px;
padding-top: 15px;
margin-left: 60px;
background-color: #333;
float:left;
}
.remeras2{
width: 281px;
height: 300px;
padding-top: 15px;
padding-left: 35px;
float:left;
background-color: #666;
}
</code>

Y esta es una imagen de lo que quiero hacer y la otra es de lo que me esta pasando...

http://img248.imageshack.us/img248/6291/layouthy5.jpg
http://img170.imageshack.us/img170/4356/layout2nc9.jpg