Lista con overflow:hidden, padding-left e immagine floattata

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