[XHTML e CSS] DIV e Struttura a 3 Colonne

[^_^M@ttia^_^]

Salve a tutti! Ho un piccolo (mi auguro) problemino di sovrapposizione:

nella struttura del mio sito utilizzo i DIV per formare tre colonne: quella di sinistra e destra hanno una larghezza fissa (in px, diciamo 111px e 240px ad es.) mentre quella in mezzo dovrebbe adattarsi a riempire la larghezza che resta (dato che in base alla risoluzione che l'user usa, lo spazio rimanente in mezzo varia). Quando l'avevo fatto con le tabelle non c'erano problemi, ma ora coi div e la proprietà float mi trovo un po' spaesato, nel senso che purtroppo non riesco a far sì che le colonne si "rispettino" fra di loro, poiché:

*) Se la Colonna centrale diventa troppo piccola, gli Elementi che lei contiene sbucano fuori dalla colonna stessa, un po' come se quella "cella" non fosse un confine per loro (vedi immagine 1);

Ecco nel concreto il codice CSS implicato (poi l'html sono 3 div coi rispettivi id):

#Sinistro
{
   float:  left;
   margin:  0 0 0 0;          // attaccato al bordo e larga fissa, ok
   width:   111px;
}

#Destro
{
   display: inline;          // Solo x IE che così non raddoppia più il margin right...
   float:   right;
   margin:  0 10px 0 0;      // un poco staccata dal bordo e larga fissa, ok
   width:   240px;
}

#Centrale
{
   margin:  0 260px 0 115px;  // Riempi tutto lo Spazio fra le due Colonne Fisse, Ok.
}

Qualcuno potrebbe illuminarmi su come fare per far sì che, esattamente come accadeva con le tabelle, quando uno allarga o restringe la cella con larghezza non-fissa varia di grandezza (e questo accade), ma quando poi la larghezza è troppo piccola per quello che la cella contiene, semplicemente compaiono le barre di scorrimento laterale nel browser e gli elementi (immagini, ecc.) restano nella cella...

Vi mostro due screenshots di ciò che è il concreto: Qui è come lo si visualizza se si hanno la risoluzione giusta (o cmq sufficiente a non farle sovrapporre):



Qui invece se si ha la risoluzione troppo piccola, oppure si restringe la finestra: invece di comportarsi "come colonne di una tabella" anarchicamente gli elementi sbucano e si sovrappongono a vicenda...



Come posso fare per avere un layout a tre colonne di cui le esterne a larghezza fissa e cosicché la centrale abbia la sua "larghezza minima" ma si espanda comunque a tappare il buco? Help please! Thx!

[TomStardust]

Se ho capito bene, ti dovrebbe bastare sulla colonna centrale un

min-width: ...px

In questo modo dai a quel div una larghezza minima oltre la quale non si restringerà.

Questa proprietà su IE però non funziona, e per aggirare il problema dovresti ricorrere a qualcosa del tipo:

* html #Centrale{
width: ...px;
}

In ogni caso per scrivere il codice di un nuovo layout, il mio consiglio è partire sempre dai template illustrati su Layout Gala di Fulciniti.

[^_^M@ttia^_^]

Ciao, chiedo scusa per il gigantesco ritardo nella risposta ma ho avuto un po' di problemini sia di connessione che di studio-esami, quindi colgo ora l'occasione per postare.

Innanzitutto ti ringrazio per la risposta, non ero a conoscenza dell'alltributo min-width (figuriamoci se su IE andava...). Tuttavia non posso applicarlo poiché in ogni pagina dovrei avere una minwidth diversa, in quanto ogni pagina ha dei contenuti diversi (immagini, ecc.). Con la stessa struttura, ma a tabelle, quando il restringimento arriva al limite, la tabella non si restringe più e compaiono gli scroll laterali, e tutto resta dentro di lei, mentre col div esce tutto ciò che non è testo, quindi mi chiedevo solo s non ci fosse appunto un modo per dire al div di comportarsi come fa giustamente la tabella, cioè di contenere quello che gli sta dentro, e se diventa troppo piccolo e le immagini ,ecc. dentro di lui non ci stanno più di non restringersi più ma di far comparire le scrollbars (un po' come una min-width dinamica ma in verità è una cosa naturale delle tabelle, non capisco perché il div fa come se non ci fosse...).

Grazie, ciauz!

[^_^M@ttia^_^]

Sorry se ritiro su il topic ma il problema persiste, nessuno ha idea di come far comportare un div come una tabella per quanto riguarda il contenere il suo contenuto senza farlo uscire dai margini?

Normale:


Div che non rispettano i bordi (come invece fanno le tabelle):