[XHTML e CSS] DIV e Struttura a 3 Colonne

[M@ttia]

Un Piccolo 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 117 e 125 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' (tanto) spaesato, nel senso che purtroppo non riesco a far sì che la colonna centrale si ridimensioni, cosicché la colonna di destra va a sovrapporsi a quella centrale e accade un macello.

Ecco nel concreto il codice CSS:

Codice: Seleziona tutto

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

#Destro
{
   float:   right;
   margin:  0 10px 0 0;      // un poco staccata dal bordo e larga fissa, ok
   width:   270px;
}

#Centrale
{
   margin:  0 0 0 115px;    // Problema (l'ho messo io così solo per dare un output...)
   width:   60%;
}


Qualcuno potrebbe illuminarmi su come fare per far sì che la colonna centrale vada a tappare esattamente il buco (cioè io imposto margini e tutto ma la larghezza giusta evitando sovrapposizioni...).

Vi mostro due screenshots di ciò che è il concreto: Qui è come lo si visualizza se si hanno la risoluzione giusta (o comunque 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 si sovrappongono a vicenda (quella di sinistra è ok perché la centrale ha margine sinistro fisso):



Come posso fare per avere un layout a tre colonne di cui le esterne a larghezza fissa ecosicché non si sovrappongano? help please! Thx!

[gialloporpora]

Prova a seguire quanto riportato qui e ci dovresti riuscire.
Ciao

[M@ttia]

Oplà, chiedo scusa per il ritardo nella risposta ma fra le tante cose da fare e lo studio il sito web ho dovuto accantonarlo un po' e non ho potuto concentrarmici troppo, comunque ora bene o male sono riuscito nell'intento, se non ancora in un particolare che proprio non riesco a sormontare:

(premetto che non posso farcela con l'attributo min-width, sia perché IE non lo supporta (figuriamoci se su IE andava...) e soprattutto perché 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 se 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...).

Thx!

[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):

[Boo]

Il punto è che il div non è una tabella, cioè l'immagine che hai tu non è nel div ma sul div. Problemi così se ne trovano ogni giorno, puoi solo scendere a compromessi riducendo l'immagine in modo che difficilmente i visitatori si troveranno colonne sovrapposte oppure eliminare la colonna di destra o ancora restringere quest'ultima.

[M@ttia]

Come temevo... stavo guardando anche l'attributo overflow: auto che fa quello che volevo io ma mette le barre sol oal div e non alla pagina, e anche a compatibilità non credo sia il massimo... Grazie x la conferma

[Pacopas]

so che la discussione è un po vecchia ma io non frequento quasi mai questa parte del forum mi sono trovato a rispondere ad una discussione con rumez è ho dato una occhiata anche a questa. probabilmente il buon vecchio mattia (perdonami la confidenza) a già risolto ma se dovesse interessare a qualcuno si può fare creando un contenitore che contiene tutte le tre colonne del corpo impostando i margini della colonna centrale cosi:

margin:0 270px 0 111px;

alla prossima

ps
si risolve anche il problema dell'overflow con il box esterno

[ssjx]

Pacopas nn sapevo che te la cavassi anche come webmaster ............ i miei complimenti 6 davvero un dio


tra l'altro mi hai risolto anche il problema che avevo con questo suggerimento

[Pacopas]

Pacopas nn sapevo che te la cavassi anche come webmaster ............ i miei complimenti 6 davvero un dio

così mi lusinghi, poi detto da te acquista un maggior valore.
sono contento di esserti stato di aiuto.

alla prossima