De basis van een div gebaseerde website (4 / 7 stap)

Stap 4: Maak twee divs in de inhoud div voor navigatie en werkelijke inhoud

Tussen de inhoud-tag; de nieuwe code voegt u toe:

< div id = "inhoud" class = "clearfix" >
< div id = "nav" >
Navigatie
< / div >
< div id = "maincontent" >
Belangrijkste inhoud
< / div >
< / div >

We voegen sommige css-code om de navigatie en de belangrijkste inhoud div-elementen;

div #nav {}
breedte: 200px;
float: links;
achtergrond: oranje;
}

div #maincontent {}
breedte: 600px;
float: rechts;
achtergrond: roze;
}

Opmerking het feit dat deze twee divs beide zweven. Als wij niet had de extra clearfix code in de vorige stap zetten, zou de div-elementen drijven buiten de omliggende div. Met de clearfix methode, zullen wij ervoor zorgen dat niet gebeurt.