Questo tutorial risolverà la maggior parte dei problemi CSS che si hanno in generale quando si vuole realizzare un effetto come da titolo: una lista a due colonne di cui la prima di larghezza fissa e la seconda che occupa tutta la parte rimanente nel browser.

Si crea prima la lista, di cui ogni elemento è costituito da due div che rappresenteranno le colonne.
Il primo div sarà la colonna fissa, che, secondo l’esempio qui riportato, conterrà un’immagine e la sua didascalia. Il secondo div rappresenterà la colonna liquida, permettendo al contenuto di essere flessibile – in larghezza – in base alla risoluzione del browser.

Ecco il codice html dell’esempio:

Diamo uno stile alla lista tramite codice CSS:

Il seguente è il codice CSS che rende l’effetto:

specifichiamo una larghezza fissa per il primo div, quindi per la prima colonna, e niente alla seconda in modo che sia larga quando tutto la finestra del browser (width: 100%).
Dunque il testo si adatterà per tutto lo spazio di destra, dando, nello stesso momento, spazio alla prima colonna a sinistra.