CSS  »  Guide  »  Guida Layout dei siti con i CSS 

Gli esempi di layout a due colonne che abbiamo visto finora sono a larghezza fissa. Ecco invece le versioni fluide, entrambe con l'immagine di background:

• Layout a due colonne con i float
• Layout a due colonne con i posizionamenti assoluti

Le versioni fluide presentano un indubbio vantaggio: sono già pronte per la stampa. Provate a fare anche solo un anteprima di stampa di uno dei due layout fluidi o di uno dei qualsiasi layout fissi visti in precedenza. Hanno uno svantaggio rispetto alle versioni fisse: stringendo al limite la finestra del browser il testo delle due colonne si sovrappone, fino a far scivolare la navigazione parzialmente sotto i contenuti nel caso della versione con la proprietà float.

Purtroppo la proprietà min-width

non è supportata da Internet Explorer, nè nella versione 5.x nè nella 6. Ha effetto invece sui browser Gecko e Opera. La dichiarazione è semplice:

div#container{
    min-width: 600px;
    }

Per Internet Explorer una soluzione ci sarebbe... ma anticipo subito che è una soluzione propretaria e non standard. Quindi una soluzione simile non passa al vaglio del validatore.

Ci tengo a precisare che non posso garantire di quanto letto in rete su un forum e che personalmente non adotterei mai una soluzione simile, ma dato che Internet Explorer detiene una percentuale maggioritaria dei browsers attualmente usati... questo è la regola css proprietaria per Internet Explorer:

div#container{
    width:expression(document.body.clientwidth < 600 ? "600px" : "auto" );
    }

La regola sopra è un espressione condizionale ternaria che dice ad Internet Explorer: se la larghezza della finestra del browser è maggiore di 600 pixels, dai al container tutta la larghezza possibile, altrimenti assegna al container una larghezza di 600 pixels.

Scarica il file zip di questa lezione

Altri articoli

Altre guide

Altre newsletter