Sto cercando di sistemare i css di un sito perché possa essere navigato tranquillamente con IE e FF ma ho un problema con l'attributo "min-height" in FF, mentre funziona in IE.

Ho una serie di div cosí annidati:
[Contenedor [bg [fondo barra / contenido [.../cuerpo/...] / footer]] ]

"cuerpo" ha fondo marroncino (dove c'è testo) mentre "contenido" ha fondo verdognolo.

Ora, quando il contenuto del div "cuerpo" supera l'altezza minima, i div che lo contengono non si adeguano alla nuova altezza, generando l'effeto che potete osservare in questa pagina di prova: http://www.rantring.com/golfbasozabal/club.asp.

Ho provato con questo css impostando height, min-height e utilizzando "!important" però non riesco a venirne a capo.
Qualcuno avrebbe qualche suggerimento da darmi?
Grazie mille

#contenedor {
width: 800px;
position: relative;
margin-right: auto;
margin-left: auto;
min-height: 810px;
height: auto !important;
height: 810px;
}

.bg {
width: 800px;
position: relative;
background-image: url(img/bg.jpg);
background-repeat: repeat-y;
min-height: 810px;
height: auto !important;
height: 810px;
margin-right: auto;
margin-left: auto;
}

#contenido {
width: 780px;
background-color: #CCCC99;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #666633;
border-left-color: #666633;
min-height: 810px;
height: auto !important;
height: 810px;
margin-right: auto;
margin-left: auto;
}