Costruire un layout “Liquido”

Ciao a tutti,

oggi vorrei parlare della creazione di un layout "Liquido", cosa significa?

Un layout liquido non è altro che un box che si adatta alla larghezza della finestra.

Un esempio, immaginate di dover costruire una pagina web a tre colonne e di voler rendere solo 2 di esse (sinistra e centrale) dinamiche, mentre la colonna di destra la volete lasciare fissa, come fare?

Nulla di più facile, ma ovviamente ogni cosa ha bisogno di un suo trucchetto per funzionare wink

Partiamo con il definire il nostro layout:

 

Sono la colonna di sinistra
Sono la colonna centrale

come potete vedere, abbiamo definito il nostro layout nidificando nel div main le due colonne let e center, questo motivo sarà spiegato più avanti.

Ora passiamo ad impostare il nostro CSS:

 


Siete interessati a verificare come viene il tutto? Niente di più semplice basterà cliccare sul seguente link e visualizzerete la demo creata appositamente per voi demo-layout-liquido

Se vi è servito lasciate qualche commento.

Un saluto e alla prossima dal Laboratorio!

Leave a Reply

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.