In het verleden gebruikten veel websites HTML-tabellen om pagina's in te delen, omdat deze methode consistent betrouwbare resultaten opleverde in oudere webbrowsers. Dit was geen ideale oplossing, omdat tabellen eigenlijk bedoeld zijn om tabulaire gegevens weer te geven in plaats van pagina's op te maken. Het gebruik van tabellen betekende ook dat de lay-out hard gecodeerd was op de pagina, waardoor het bijwerken van de site veel tijdrovender werd. Cascading Style Sheets introduceerden de 'float'-eigenschap, waardoor ontwerpers elementen naar links of rechts konden zweven. Dit geeft meer controle over de pagina en heeft als bijkomend voordeel dat de lay-out van de site gescheiden blijft van de inhoud.

1.

Open een teksteditor of HTML-editor en maak een nieuw HTML-document.

2.

Voeg de volgende code toe aan het hoofdgedeelte van de pagina:

Sla de pagina op en open deze in uw webbrowser. Je zult zien dat de inhoud in de tweede div wordt weergegeven onder de inhoud van de eerste div.

3.

Voeg de volgende CSS-code toe aan het gedeelte van uw HTML-document:

Sla de pagina op en ververs in uw browser om de wijzigingen weer te geven. De CSS-regel is gericht op beide div's die zijn genest in de divisie "myContainer". De "float" eigenschap vertelt de browser om de divs naar links te zweven - je kunt de float waarde naar "right" veranderen om de divs naar de rechter rand van de bevattende div te zweven. De divs zijn ingesteld op een vaste breedte van 300 pixels en hebben een zwarte rand van 1 pixel om de lay-out beter zichtbaar te maken. In uw browser ziet u dat de vakken nu naast elkaar worden weergegeven.

4.

Voeg een derde div toe aan de hoofdtekst van de pagina, buiten de divisie "myContainer" zoals hieronder wordt getoond:

Sla de pagina op en laad hem opnieuw in uw browser. Je zult zien dat de derde div wordt weergegeven naast de eerste en tweede divs, ook al is deze niet gedobberd. Dit gebeurt omdat de resterende HTML-elementen rond de zwevende elementen stromen. Dit kan in sommige gevallen wenselijk gedrag zijn, maar in dit voorbeeld willen we dat de derde div wordt weergegeven onder de zwevende div's om een ​​voettekst te maken.

5.

Voeg de volgende regel toe aan de stijlsectie in de kop van de pagina:

myFooter {

clear: both; 

}

Dit is gericht op de derde "myFooter" div en vertelt de browser om de zweeftekst te stoppen en daaropvolgende HTML-elementen onder de divisie "myContainer" weer te geven. Sla de pagina op en vernieuw deze. Je zult zien dat de footer gevormd door de derde div nu wordt weergegeven onder de zwevende divs.

Tip

• U kunt de eigenschap CSS "marge" gebruiken om een ​​spatie te maken tussen zwevende divs.