Du har en hjemmeside, men div-boksene er ikke på vej op. Dette kan ske af flere grunde, især når du overvejer positionsproblemerne med divs fra et websted til et andet. På samme måde kan bokseelementer overlappe af flere årsager, lige fra positioneringsfejl til overløbsproblemer og simple floatproblemer. I de fleste tilfælde vil en hurtig og nem ændring af dit websteds stilark løse problemet.

1.

Tilføj en margen, hvis boksene for øjeblikket ikke har marginer og overlapper med kun en lille mængde. Du kan indstille en margen på kun en side, f.eks. Til venstre, hvis du kun vil bruge marginelementet til at skubbe det andet bokseelement væk. Hvis f.eks. Div A og div B er placeret ved siden af ​​hinanden og div B overlapper på venstre side, kan du ændre dit stilark for at tilføje en venstre side margen til div A som følger:

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

2.

Søg i stilarket for at placere værdier, der kan forårsage overlapning og ændre dem. Hvis du bruger absolut positionering til at arrangere dit websites div-elementer, så er det en fri for alle - ethvert element kan overlappe ethvert andet element på siden. Så hvis du har div A-sæt som 100 pixels bredt og 15 pixels fra toppen og venstre af siden, skal div B være mindst 115 pixels til venstre for ikke at overlappe div A. Du kan angive position fra øverst eller nederst, og fra højre eller venstre.

3.

Indstil en div med en bestemt bredde og skjul overløbet. Dette stopper div fra at overskride en bestemt størrelse og forhindrer indholdet i at spole over, så at sige. For eksempel, hvis div A ikke har en indstillet bredde, og du sætter et stort billede i det, udvides div'en automatisk for at rumme billedet. Hvis du indstiller bredden, vises billedet stadig ud over kanterne af div, men div'en vil ikke udvides. Hvis du skjuler overløbet, vises billedet kun inden for grænserne af div og vil ikke udvide elementet. Hvis du for eksempel indstiller div A til at være 200 pixel bred og ikke overløb, vil du bruge denne stilkode:

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

4.

Brug "float" mulighed for at stable div bokse side om side automatisk. For eksempel ønsker du div A at fungere som et sidebjælke og div B for at holde dit indhold - du kan flyde begge divs til venstre, hvilket får dem til at justere vandret. Floated div elementer vil ikke overlappe hinanden. Et eksempel på to floated elementer ser sådan ud:

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

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

Tips

• Hvis du bruger Firefox, kan du højreklikke på en boks og vælge "Inspect Element." Dette giver dig en visuel oversigt over hvert element, som ofte kan hjælpe dig med at finde ud af et særligt vanskeligt problem.
• Du kan indstille overløb for kun at skjule på x- eller y-aksen ved hjælp af "overløb-x" eller "overløb-y".