Ombreggiatura DIV

[grandemedia]

Salve a tutti,
sto creando una struttura alquando complessa come dimostrato nella figura 1.



In poche parole il risultato finale dovra' essere un box di larghezza fissa ed altezza variabile con bordo ed ombreggiatura. Ho pensato di lavorare su due livelli: un livello per l'ombreggiatura ed un secondo livello per il box.

Questo e' un esempio concreto della struttura.




In poche parole ho creato una classe #main_container contenente 3 altre classi .top .body .bottom . Nella figura riportata DIV1 avra' assegnato .top, DIV2 .body e DIV3 .bottom. Le classi .top e .bottom avranno un png come background con l'ombreggiatura degli estremi e dei bordi. Mentre .body ha come background un altro pgn con l'ombreggiatura ripetuta verticalmente.

Fino ad ora ho realizzato l'ombreggiatura e funziona perfettamente. Ho solo due grandi dubbi:

1) Lavorando sulla classe da assegnare a "DIV OVERLAY" dovro' operare con z-index per posizionare il div "sopra" gli altri. Nonostante questo div sara' su un livello superiore, e' possibile fare in modo che mantenga un margine di 15px rispetto a #main_container

2) Come posso fare in modo che #main_container di adatti alla lunghezza di DIV OVERLAY?

Grazie anticipate.

[ResianTaxidrive]

credo ci sia qualche complicazione di troppo.

io metterei quello sfondo che tu metti a .body, direttamente al tuo div overlay (a cui assegnerei un posizionamento relativo). poi al suo interno metteri due div con class .top e .bottom

.top{
position:absolute;
top:0px;
}

.bottom{
position:absolute;
bottom:0px;
}