I CSS hanno chiari limiti di impaginazione, che in parte potrebbero venir risolti da CSS3. La scomparsa di Explorer 5 dalle statistiche aiuta un po’ a trovare soluzioni, ma capita a volte qualche situazione particolarmente fastidiosa. Un caso raro ma non troppo è quando si ha necessità di affiancare un elenco (puntato o numerato) ad un’immagine. Se si applica il float all’immagine e la lista ha, come di solito accade, la proprietà list-style-position:outside, il risultato è che i puntatori dell’elenco si sovrappongono all’immagine.

Un effetto assai poco gradevole:

I puntatori dell’elenco si sovrappongono all’immagine. Vedi l’esempio completo.

Non ci sono molte soluzioni. Quella più robusta pare essere la seguente: assegnare alla lista un overflow:hidden e, contemporaneamente, un padding-left sufficiente a spostare in là di quanto basta i puntatori.

Esempio corretto. Vedi il codice completo

Controindicazioni: se la lista è più lunga dell’immagine, gli ultimi elementi dell’elenco non seguiranno il float.

Esempio dell’effetto collaterale di questa soluzione. Vedi il codice completo.

Gli esempi linkati aiuteranno a capire. A voi la scelta: dipende anche dal vostro layout, dalla lunghezza dell’elenco e dalle dimensioni dell’immagine. Ma almeno è un trucco legale, per sintassi e logica (e se qualcuno trova soluzioni nuove, le segnali!).

PS: Qualcuno segnala che per attivare haslayout su IE6 è necessario usare qualcosa come zoom:1 o altre proprietà che abbiano lo stesso effetto, ma nei miei test questo non si è rivelato necessario. Tenetelo presente in caso notaste problemi con quel browser.