Sådan viser du bokse ved siden af hinanden i HTML

Tidligere brugte mange hjemmesider HTML-tabeller til at lægge sider ud, fordi denne metode producerede konsekvent pålidelige resultater i ældre webbrowsere. Dette var ikke en ideel løsning, da tabeller virkelig er beregnet til at vise tabeldata i stedet for at lave sider. Brug af tabeller indebar også, at layoutet var hårdt kodet ind på siden, hvilket gør opgaven med at opdatere siden mere tidskrævende. Cascading Style Sheets introducerede egenskaben "float", så designere kunne flyde elementer til venstre eller højre. Dette tillader mere kontrol over siden og har den ekstra fordel at holde site layoutet adskilt fra indholdet.

Åbn en teksteditor eller HTML-editor og opret et nyt HTML-dokument.

Tilføj følgende kode til sidens krop:

Dette er tekst i den første div Dette er tekst i den anden div

Gem siden, og åbn den i din webbrowser. Du vil se, at indholdet i den anden div vises under indholdet i den første div.

Indsæt følgende CSS-kode i sektionen af dit HTML-dokument:

Gem siden og opdater i din browser for at vise ændringerne. CSS-reglen retter sig mod begge divs nestede inden for "myContainer" div. Egenskaben "float" fortæller browseren at flyde divs til venstre - du kan ændre floatværdien til "højre" for at flyde divs til højre kant af den indeholdte div. Divs er sat til en fast bredde på 300 pixels og har en 1 pixel sort kant for at gøre layoutet lettere at se. I din browser vil du se, at boksene nu vises side om side.

Tilføj en tredje div til sidekroppen uden for "myContainer" div som vist nedenfor:

Dette er tekst i den første div Dette er tekst i anden div Dette er tekst i den tredje div

Gem siden og genindlæs den i din browser. Du vil se, at den tredje div vises ved siden af den første og anden divs, selvom den ikke er blevet floated. Dette sker fordi de resterende HTML-elementer flyder rundt om de flydende elementer. Dette kan være ønskeligt adfærd i nogle tilfælde, men i dette eksempel ønsker vi den tredje div at vise under de floated divs for at oprette en footer.

Indsæt følgende regel i stil sektionen i siden af siden:

myFooter {

clear: both;

}

Dette retter sig mod den tredje "myFooter" div og fortæller browseren at afbryde float og vise efterfølgende HTML-elementer under "myContainer" div. Gem og opdater siden. Du vil se, at fodfoden dannet af den tredje div nu vises under de svævede divs.