Du har en hemsida, men div-lådorna klarar inte rätt. Detta kan hända av flera anledningar, särskilt när du överväger positionsproblemen med divs från en webbplats till en annan. På samma sätt kan lådelement överlappa av några anledningar, allt från positioneringsfel till överflödsproblem och enkla floatproblem. I de flesta fall kommer en snabb och enkel ändring av din webbplatss stilark att lösa problemet.

1.

Lägg till en marginal om rutorna inte för närvarande har marginaler och överlappar med endast en liten mängd. Du kan ställa in en marginal på bara en sida, till exempel till vänster om du bara vill använda marginalelementet för att trycka på det andra lådelementet bort. Till exempel, om div A och div B placeras bredvid varandra och div B överlappar på vänster sida, kan du ändra ditt stilark så att du lägger till en vänstra margin till div A enligt följande:

en {bredd: 100px; marginal-vänster: 10px; }

2.

Sök i stilarket för att placera värden som kan orsaka överlappning och ändra dem. Om du använder absolut positionering för att ordna din webbplatss div-element, är det en fri-för-allt-något element kan överlappa något annat element på sidan. Så om du har div A-uppsättningen som 100 pixlar bred och 15 pixlar från toppen och vänster på sidan måste div B vara minst 115 pixlar till vänster för att inte överlappa div A. Du kan ange position från topp eller botten, och från höger eller vänster.

3.

Ange en div med en viss bredd och dölj överflödet. Detta hindrar div från att överskrida en viss storlek och förhindrar att innehållet spolas över, så att säga. Om till exempel, om div A inte har en uppsättning bredd och du lägger en stor bild i den, kommer div automatiskt att expandera för att rymma bilden. Om du ställer in bredden visas bilden fortfarande bortom kanterna på div, men div kommer inte att expandera. Om du döljer överflödet visas bilden bara inom gränserna för div och kommer inte att expandera elementet. Till exempel, för att ställa in div A för att vara 200 pixlar bred och inte att överfalla, skulle du använda denna stilkod:

en {bredd: 200px; översvämning: gömd; }

4.

Använd "float" alternativet för att stapla div rutor sida vid sida automatiskt. Till exempel vill du att div A ska fungera som en sidofält och div B för att hålla ditt innehåll - du kan flyta båda delarna till vänster, vilket får dem att justera horisontellt. Floated div-element kommer inte att överlappa varandra. Ett exempel på två flytande element ser något ut så här ut:

en {bredd: 150px; flyta till vänster; }

b {bredd: 400px; flyta till vänster; }

tips

• Om du använder Firefox kan du högerklicka på en ruta och välja "Inspektera element". Detta ger dig en visuell bild av varje element som ofta kan hjälpa dig att hitta ett speciellt knepigt problem.
• Du kan ställa in överflöde för att bara gömma sig på x- eller y-axeln med "överflöde-x" eller "överflöde-y".