Ciao a tutti.
Ho un po' di problemi con il layout che sto creando.
Praticamente devo rifare questo layout:


Ho pensato per prima cosa di fare un div generale:
codice:
#esterno {
	width: 634px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
Questo div racchiude il div ombra (che contiene le ombre).Lo sfondo di questo div è questo:

il css del div ombra è:
codice:
#ombra {
	background-image: url(img/immagini/container_03.gif);
	background-repeat: repeat-y;
	width: 640px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
Poi in ombra devo inserire a destra il testo e a sinistra il box arancione come nell'immagine,così creo un div chiamato contenuto che conterrà il testo:
codice:
#contenuto {
	width: 400px;
	float:left;
}
Poi con questo html creo la pagina:
codice:
<div id="esterno">
<div id="ombra">
<div id="contenuto">
</div>
</div>
</div>
Se scrivo in contenuto lo sfondo del div ombra non si vedere,mentre se scrivo ad esempio:
codice:
<div id="esterno">
<div id="ombra">
<div id="contenuto">


</p>

</div>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>


</p>
</div>
</div>
Se scrivo nel div contenuto adesso lo sfondo si vede.
Io vorrei però che funzionasse in questo modo:
codice:
<div id="esterno">
<div id="ombra">
<div id="contenuto">
prova
</div>
</div>
</div>
Qundi all'allungarsi di contenuto si deve allungare anche ombra,cosa devo fare?