Proprietà tipo float ma in verticale, con possibilità di scroller

[Gas75]

Salve,
ho un layout composto da 4 div:

• #logo in alto a sinistra
• #sopra in alto a destra
• #menu in basso a sinistra
• #destro in basso a destra

Ora, mentre #logo e #sopra sono ad altezza fissa 60px, #menu e #destro, che gli stanno rispettivamente sotto, dovrebbero occupare tutta la schermata del browser, proprio come si fa con float per posizionare un elemento su un lato del layout lasciando il resto al successivo... ma in verticale! Praticamente come si fa(ceva) con i frame, quando la dimensione delle righe era definita con un asterisco "*" per indicare "tutto lo spazio restante".

Inoltre mi servirebbe, all'occorrenza, che il div #destro, qualora il suo contenuto lo richiedesse, si dotasse di una barra di scorrimento autonoma, analogo al tag

scrolling="auto"

dei frame, lasciando fissi gli altri 3 div.

[ResianTaxidrive]

non so se ho ben capito, cmq se non metti una larghezza a #menu e #destro, essi occuperanno automaticamente tutto lo spazio disponibile.
Per lo scroll, tu metti una altezza fissa, metti "overflow:scroll"

[Gas75]

Il problema è l'altezza, non la larghezza.

Allego un'immagine per spiegarmi meglio: la prima "riga", suddivisa tra #logo e #sopra, è alta 60px, la seconda, composta da #menu e #destro, deve adattarsi in altezza a tutto lo spazio rimanente; se poi il contenuto di #destro non dovesse entrare in quell'altezza, dovrebbe apparire lo scroller (verticale) per quel div.

[Simonetta72]

Se ho ben capito, tu non vuoi dare un'altezza fissa ai due div, ma vuoi che la loro altezza sia strettamente in funzione della risoluzione del monitor. Se il contenuto va oltre, parte lo scroll. Giusto? Se è così io non so se si possa fare ma sarei curiosa di saperlo!

[Gas75]

Per il div #destro, esattamente come hai detto (#menu è già organizzato per non avere mai necessità di scroller).
A me è stato detto che con css e div, e le opportune impostazioni di elementi e valori, posso riprodurre qualsiasi layout impostato su frame o tabelle... senza usare queste ultime.
Sto cercando di capire come.

---

Ho ottenuto un risultato non corretto ma che penso sia sulla strada giusta...
Inserendo nel foglio di stile

body, html { height: 100%; }

e nelle dichiarazioni dei due div #menu e #destro

height: 100%;

ottengo i div che occupano tutta l'altezza della finestra del browser, ma...

1) ci sono anche dei div alti 60px sopra di essi, e quindi questo height: 100% fa apparire lo scroller sempre in quanto i div sforano di 60 in basso...
2) lo scroller è unico per tutta la pagina web (inclusi i div fissi in alto), mentre a me servirebbe solamente per il div #destro!

[ResianTaxidrive]

metti solo per il div destro "scroll:auto"

[Gas75]

Niente da fare: mette lo scroller su tutta la pagina, come se al posto dei css stessi usando delle tabelle!
Inoltre non riesco a risolvere il problema dell'altezza totale!
A me serve che 60px + (altezza #destro) = 100%, ma come faccio a dare a #destro (e #menu...) un'altezza pari a 100% - 60px?!

Possibile che con i css posso ripartire un'altezza soltanto suddividendo i div in altezze percentuali?

[ResianTaxidrive]

Ma guarda che 100% indica il 100% dell'altezza disponibile, calcolata sulla dimensione della finestra del browser. Nel tuo caso, dai 60px in poi, l'altezza a
che rimane a disposizione.
Non so che dire, ho provato a fare una simulazione di quello che ti serve e non riscontro il tuo problema, forse è il caso che posti un link della pagina che stai facendo.

[Gas75]

Ecco qua... http://www.sendspace.com/file/yzga6f
La situazione che vedrai è un po' ibrida perché l'ultima volta che ci ho messo mani, poi non ho ripristinato il css com'era (FrontPage non lo permette sui css ), ma se ricrei i passi che ho descritto nei messaggi precedenti, dovresti ritrovarti con height: 100% che "si somma" ai 60px dei div di sopra.

[ResianTaxidrive]

Qualche appunto:
1) la prossima volta metti direttamente il file html e non un file da scaricare.
2) non è molto corretto che tu non presenti il codice modificato secondo le istruzioni ricevute o secondo le prove che hai fatto. Non sono gli utenti che devono ricostruire il codice in base a quanto detto ma devi farlo tu stesso.

In via eccezionale ho apportato io delle modifiche, te le posto ma non te le spiego

body { background: #000000; font-family: Arial,Verdana,Helvetica; font-size: 10px; 	color: #ffffff; margin: 0px; height:100%; }
a:link    { color: #808080; text-decoration: none; font-weight: bold; }
a:visited { color: #808080; text-decoration: none; font-weight: bold; }
a:active  { color: #ffffff; text-decoration: none; font-weight: bold; }
a:hover   { color: #ffffff; text-decoration: none; font-weight: bold; }
a.cella   { display: block; } 
html{height:80%;overflow:hidden;}
a:hover.cella { display: block; background-color: #505050; }

#logo
{
	margin: 0;
	width: 200px;
	height: 60px;
	padding: 0px;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	font-size: 22px;
	text-align: center;
	float: left;
}

#sopra
{
	margin-top: 0px;
	margin-left: 201px;
	height: 60px;
	border-bottom: 1px solid #ffffff;
}

#menu
{
	margin: 0px;
	width: 200px;
	border-right: 1px solid #ffffff;
	padding: 10px 0 0 0;
	float: left;
}

#destro
{
	margin-left: 201px;
	padding: 10px 10px 10px 10px;
	font-size: 14px;
	height:100%;
	overflow:auto;
	
	
}

dovrebbe fare abbastanza al caso tuo, fai un po' di verifiche, naturalmente aggiungi un po' di testo.

p.s. quel menu superiore con le tabelle non si può guardare! Togli immediatamente la tabella e riscrivi il tutto come html comanda.