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.

Anche questo esempio ha un problema. Lo potete notare se ridimensionate la finestra: la lista si muove in blocco sotto l'immagine, oltre un certo livello di ridimensionamento. Questo comunque non occulta alcun contenuto ed è preferibile al comportamento di default.

C'è ancora un problema, che accade quando l'immagine ha un height minore di quello della lista: lo vediamo nel prossimo esempio

(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.