L'immagine è floattata a sinistra, e l'elenco che segue ha list-style-position: outside.

1. Abbiamo applicato all'elenco la proprietà overflow: hidden: questo evita che i puntatori si sovrappongano all'immagine
2. Inoltre abbiamo aggiunto un padding-left: 2em
3. Questo è sufficiente a rendere nuovamente visibili i puntatori della lista.
4. Però se l'immagine ha un height minore della lista, allora la lista non floatterà attorno all'immagine come ci si aspetterebbe
5. Questo accade per effetto dell'overflow: hidden. Tuttavia è un comporamento che non occulta neanche in questo caso alcun contenuto: può solo creare un fastidioso spazio vuoto nella presentazione
6. Il paragrafo che segue la lista riprenderà al suo posto, sotto la lista

Un male tutto sommato minore!

(Vai all'articolo originale)

Ecco il codice CSS usato in questa pagina:

img {float:left;}
ol {padding:0;margin:0;list-style-position:outside; width: 40%;overflow:hidden; padding-left: 2em}

Questa pagina è in standard mode.