solapamiento extraño

Estoy haciendo una web para un cliente y resulta que en una sección, aparece un menú de impresoras compatibles que, como es lógico, es diferente para cada producto; por lo tanto dicha lista tendrá un height diferente para cada producto.
Si la lista es corta, no pasa nada. Pero si el listado es demasiado largo, se solapa con el footer y continúa por debajo hasta desaparecer de la pantalla.
¿como hago para que el height del DIV donde se carga el listado haga expandirse la página hacia abajo y no se solape?

Como una imagen vale más que mil palabras, aqui podeis ver lo que pasa.

http://174.143.255.74/productos/cartucho-compatible-imax-bc01-bc02

Gracias de antemano.

Continuo investigando.
Resulta que si al DIV "page" (que es el contendor de la parte central de la web, donde se va a cargar el listado) le pongo overflow = scroll. Si el listado es demasiado largo, ya no se solapa con el footer, sino que aparece un scroll hacia abajo. Pero lo que yo quiero es que el DIV "page" ajuste su altura en función del listado, no que aparezca un scroll.

¿como se hace eso?

La primera acción que deberías hacer es pasar tu código generado por los validadores (html y css). Quizás se resuelva ese problema ese en concreto o quizás no, pero siempre se arregla algo y la imagen que vas a trasmitir al verse tus códigos siempre será mejor. Creo.

Bueno, a lo que te preocupa:
En la página que enlazas tienes una altura al #producto. Suprimela.
Y si necesitas que tenga una altura mínima en algunas situaciones, usa min-height.

Saludos

Fantástico, maravilloso, espiritutiflautico, estaba empezando a bizquear con el firebug de tanto cambiar cosas a ver si se solucionaba. Muchas gracias por todo, he quitado la altura del #producto en firebug y TODO SOLUCIONADO, ahora solo me falta hacerlo en el html.

posdata:
Seguire tus consejos con los validadores. GRACIAS.