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