Du har et nettsted, men div-boksene er ikke lining opp riktig. Dette kan skje av flere grunner, spesielt når du vurderer stillingsproblemer med divs fra ett nettsted til et annet. På samme måte kan bokselementer overlappe av noen grunner, alt fra posisjoneringsfeil til overløpsproblemer og enkle flytproblemer. I de fleste tilfeller vil en rask og enkel endring i nettstedets stilark løse problemet.

1.

Legg til en margin hvis boksene for øyeblikket ikke har marginer og overlapper bare med en liten mengde. Du kan angi en margin på bare én side, for eksempel til venstre, hvis du bare vil bruke marginalelementet til å skyve det andre bokselementet bort. For eksempel, hvis div A og div B er plassert ved siden av hverandre, og div B overlapper på venstre side, kan du endre stilarket ditt for å legge til en venstre marg til div A som følger:

en {bredde: 100px; margin-venstre: 10px; }

2.

Søk i stilarket for å plassere verdier som kan forårsake overlapping og endre dem. Hvis du bruker absolutt posisjonering for å ordne nettstedets div-elementer, så er det et gratis-for-alt - noe element kan overlappe noe annet element på siden. Så hvis du har div A sett som 100 piksler bredt og 15 piksler fra toppen og venstre på siden, må div B være minst 115 piksler til venstre for ikke å overlappe div A. Du kan spesifisere posisjon fra øverst eller nederst, og fra høyre eller venstre.

3.

Sett en div med en bestemt bredde og skjul overløpet. Dette stopper div fra å overskride en spesifisert størrelse og forhindrer innholdet i å spilles over, så å si. For eksempel, hvis div A ikke har en sett bredde og du legger et stort bilde i det, vil div automatisk ekspandere for å imøtekomme bildet. Hvis du angir bredden, vil bildet fortsatt vises utenfor kantene på diven, men div vil ikke utvides. Hvis du skjuler overløpet, vil bildet bare vises innenfor grensene til diven og vil ikke utvide elementet. For eksempel, for å sette div A til å være 200 piksler bred og ikke å overflyte, ville du bruke denne stilkoden:

en {bredde: 200px; overløp: skjult; }

4.

Bruk "float" alternativet til å stable div bokser side ved side automatisk. For eksempel vil du at div A skal fungere som et sidebar og div B for å holde innholdet ditt - du kan flyte begge divs til venstre, og dermed få dem til å justere horisontalt. Floated div-elementer vil ikke overlappe. Et eksempel på to flytede elementer ser noe slik ut:

en {bredde: 150px; flyte: venstre; }

b {bredde: 400px; flyte: venstre; }

Tips

• Hvis du bruker Firefox, kan du høyreklikke på en boks og velge "Inspiser element". Dette gir deg en visuell oversikt over hvert element som ofte kan hjelpe deg med å finne frem til et spesielt vanskelig problem.
• Du kan sette overløp for å gjemme bare på x- eller y-aksen ved å bruke "overflow-x" eller "overflow-y."