Floating the sidebar
Nu moeten we de #sidebar div naar links zien te krijgen. Dat doen we met een float. Om te begrijpen wat een float precies doet, moeten we even een zijsprongetje maken.
Stel dat je een <p> hebt met wat tekst erin en een plaatje. Vaak wil je dat de tekst om het plaatje heen loopt, bijvoorbeeld rechts of links. Dit is nu precies wat je met een float kunt doen.
Als je dit doet:
CSS
img {
float: left;
}
Dan zal het plaatje aan de linkerkant van de <p> kleven en de tekst loopt er keurig rechts omheen.
Nu hebben floats een eigenschap die je goed moet snappen wil je er lekker mee kunnen werken. Als je <p> niet veel tekst heeft en het plaatje is hoger dan je alinea, dan "breekt" het plaatje aan de onderkant door de border heen. Zie voorbeeld 1
Waarom is dit gedaan? Stel dat je een aantal korte alinea's hebt en het plaatje staat in de eerste. Dan zou het er nogal raar uitzien als de tweede alinea onder het plaatje begon. Zie voorbeeld 2
De andere korte alinea's moeten natuurlijk ook langs het plaatje lopen! Vandaar dat een float het element waar hij in zit niet oprekt. Hij breekt door de onderste border heen, zodat ook andere alinea's er keurig langs lopen. Zie voorbeeld 3
In de lay-out die we deze keer maken, levert dit geen problemen op, omdat de #sidebar zich niet in een andere div bevindt. Maar zodra je pagina iets ingewikkelder wordt, komt het vaak voor dat je een div met een float in een andere div moet stoppen. En dan wil je dat de buitenste div mee rekt met de hoogte van de float-div. Er zijn een aantal manieren om dit te bewerkstelligen.
Daarover misschien meer in een volgende tut die een ingewikkelder lay-out behandelt.
We geven onze #sidebar dus een float: left en een paar andere eigenschappen:
#sidebar {
float: left;
padding: 9px;
width: 200px;
border-right: 2px solid #fff;
}
De padding is de afstand van de inhoud van de div tot de randen van de div. 9px geeft een aardige ruimte. De breedte staat op 200. De padding moet je optellen bij de breedte. Dat geeft 200 + 9 + 9 = 218 pixels. Met border-right zetten we een 2 pixels brede witte border aan de rechterkant. Die moet je ook bij de breedte optellen, dus dat geeft een breedte van 220 pixels.
N.B. Padding en borders moet je bij de breedte optellen!
Als je in IE géén doctype opgeeft, dan blijft de totale breedte onveranderd. Ik dwing IE altijd in de strict mode. Dan behandelt in ieder geval IE6 het boxmodel correct. Er zijn ook boxmodel "hacks" voor IE of andere trucs. Lees meer...
Voor HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Of voor XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">