Salve vi pongo il mio problema visto che è un po' che cerco online ed ancora non ho risolto


Praticamente ho un div main a monte che contiene tutti i div al suo interno

questo è il suo css


div#main {
min-height:100%;
height:auto;
height:100%;
width:100%;
margin-right:auto;
margin-left:auto;
background-image: url(../img/sfondo.jpg);
background-repeat: repeat-x;
text-align: center;
}

subito al suo interno ho due div

uno posizionato in alto e l'altro subito sotto

questo è quello in alto

div#ombra {
height:432px;
width:981px;
margin-right:auto;
margin-left:auto;
background-image: url(../img/sfondo_ombra_superiore.gif);
background-repeat: no-repeat;
position: relative;
top: 0px;
}


questo quello subito sotto



div#ombra_inferiore {
width:981px;
background-image: url(../img/sfondo_ombra_inferiore.gif);
background-repeat: repeat-y;
position: relative;
top: 0px;
text-align: center;

}



adesso arriva il mio problema

all'interno del div ombra inserisco i contenuti e vorrei che la sua altezza si ridimensionasse in base al contenuto, quì noterete che non ho dato l'altezza, ma vi giuro che le ho provate tutte.

Avete qualche consiglio?