Plassering av bilde i forhold til liste med underpunkter – CSS

Om du vil plassere et bilde ved siden av annet innhold kan du bruke en .class som vist nedenfor (plasserer i dette tilfellet bildet til venstre for annet innhold):

.fltlft {
float: left;
margin-right: 8px;
}

Hvis du plasserer bildet til venstre for en liste, ul eller ol, vil du imidlertid få et problem med at punktene i listen vil ligge over bildet. Innholdet i listen plasserer seg som det skal til høyre for bildet, men selve punktene overlappet bildet. For å løse dette problemet kan du enten justere margin eller padding for listen. For eksempel:

ul {
padding-left: 200px;
}

Hva så om du har lister med underpunkter? Med stilen over vil også underpunktene få en padding på 200px og det er neppe det du ønsker. Lag en stil til som retter seg mot underpunktene, for eksempel slik:

ul ul {
padding-left: 20px;
}