Tidigare använde många webbplatser HTML-tabeller för att lägga ut sidor eftersom den här metoden producerade konsekvent pålitliga resultat i äldre webbläsare. Det här var inte en idealisk lösning, eftersom tabeller verkligen är avsedda att visa tabelldata istället för att lägga ut sidor. Med hjälp av tabeller menade också att layouten var hårdkodad på sidan, vilket gjorde uppgiften att uppdatera webbplatsen mer tidskrävande. Cascading Style Sheets introducerade egenskapen "float", så att designers kan flyta element till vänster eller höger. Detta möjliggör mer kontroll över sidan och har den extra fördelen att webbplatslayouten hålls skild från innehållet.

1.

Öppna en textredigerare eller HTML-editor och skapa ett nytt HTML-dokument.

2.

Lägg till följande kod i sidkroppen:

Spara sidan och öppna den i webbläsaren. Du ser att innehållet i den andra diven visas under innehållet i den första div.

3.

Infoga följande CSS-kod i avsnittet av ditt HTML-dokument:

Spara sidan och uppdatera i webbläsaren för att visa ändringarna. CSS-regeln riktar sig till båda divs nestade inom "myContainer" div. Egenskapen "float" berättar att webbläsaren flyter divs till vänster - du kan ändra floatvärdet till "right" för att flyta divs till den högra kanten av den innehållande diven. Delen är inställda på en fast bredd på 300 pixlar och har en 1-pixel svart ram för att göra layouten lättare att se. I din webbläsare ser du att rutorna nu visas sida vid sida.

4.

Lägg till en tredje div till sidkroppen, utanför "myContainer" -delen som visas nedan:

Spara sidan och ladda om den i webbläsaren. Du får se att den tredje diven visas bredvid den första och den andra delningen, även om den inte har floats. Detta beror på att de återstående HTML-elementen flyter runt de flytande elementen. Detta kan vara önskvärt beteende i vissa fall, men i det här exemplet vill vi att den tredje diven ska visas under de flytande delarna för att skapa en sidfot.

5.

Lägg till följande regel i stilavsnittet i sidans huvud:

myFooter {

clear: both; 

}

Detta riktar sig mot den tredje "myFooter" -divisionen och berättar att webbläsaren ska avbryta float och visa efterföljande HTML-element under "myContainer" div. Spara och uppdatera sidan. Du ser att sidfoten som bildas av den tredje diven nu visas under de flytande delarna.

Tips

• Du kan använda egenskapen CSS "margin" för att skapa ett mellanslag mellan floated divs.