Tidligere brukte mange nettsteder HTML-tabeller til å legge ut sider fordi denne metoden ga konsekvent pålitelige resultater i eldre nettlesere. Dette var ikke en ideell løsning, da tabellene egentlig er ment å vise tabelldata i stedet for å legge ut sider. Bruke tabeller innebar også at oppsettet var hardkodet inn på siden, noe som gjorde oppgaven med å oppdatere nettstedet mer tidkrevende. Cascading Style Sheets introduserte egenskapen "float", slik at designere kan flyte elementer til venstre eller høyre. Dette gir mer kontroll over siden og har den ekstra fordelen av å holde nettstedslayouten skilt fra innholdet.

1.

Åpne en tekstredigerer eller HTML-editor og opprett et nytt HTML-dokument.

2.

Legg til følgende kode i sidekroppen:

Lagre siden og åpne den i nettleseren din. Du ser at innholdet i andre div vises under innholdet i den første div.

3.

Sett inn følgende CSS-kode i delen av HTML-dokumentet ditt:

Lagre siden og oppdatere i nettleseren din for å vise endringene. CSS-regelen retter seg mot divisjoner som er nestet i divisjonen "myContainer". Egenskapen "float" forteller at nettleseren flyter divs til venstre - du kan endre flytverdien til "høyre" for å flyte divs til høyre kant av den inneholdende div. Divs er satt til en fast bredde på 300 piksler og har en 1-pixel svart ramme for å gjøre oppsettet lettere å se. I nettleseren din ser du at boksene nå vises side om side.

4.

Legg til en tredje div til sidekroppen, utenfor "myContainer" diven som vist nedenfor:

Lagre siden og last den inn i nettleseren din. Du ser at den tredje diven vises ved siden av første og andre div, selv om den ikke har blitt floated. Dette skjer fordi de gjenværende HTML-elementene flyter rundt de flytede elementene. Dette kan være ønskelig atferd i noen tilfeller, men i dette eksemplet vil vi at den tredje div skal vises under de flytede divene for å lage en bunntekst.

5.

Sett inn følgende regel i stilavsnittet i hodet på siden:

myFooter {

clear: both; 

}

Dette retter seg mot den tredje "myFooter" diven og forteller at nettleseren skal stoppe float og vise påfølgende HTML-elementer under "myContainer" div. Lagre og oppdater siden. Du ser at bunnteksten dannet av den tredje div er nå vist under de flytende divs.

Tips

• Du kan bruke egenskapen CSS "margin" til å skape et mellomrom mellom flytede divs.