- Learn
- Guida Layout dei siti con i CSS
- Layout a due colonne fluidi
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:
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
Se vuoi aggiornamenti su Layout a due colonne fluidi inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Alessandro Ranellucci
Alessandro Ranellucci, autore di Slic3r, ci parla del suo software per la gestione di stampanti 3D.