Layout a due colonne fluidi

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