Verticaal Centreren Content
Het verticaal centreren van de content in de viewport van je browser is slechts een paar stappen verwijderd van het creëen van twee kolommen of het centreren van de kolom met content.
Eigenlijk valt dit verticaal centreren van de content samen met het simuleren van frames, waarbij je gebruik maakt van overflow properties op de body (overflow:hidden;) en op de content (overflow:auto;).
Met padding op de body houd je afstand tussen de rand van de viewport van de browser en de box waarin je de content van de pagina hebt geplaatst.
Andere 'boxes' in de markup van de pagina zijn:
div#headerdiv#footerdiv#menudiv#flap
Voor elk van deze boxes geldt, dat ze voor Internet Explorer de stijl position:absolute; krijgen dat voor andere moderne browsers wordt overruled met (bijvoorbeeld voor het menu) body>div#menu { position:fixed; }. Hier maak je dus gebruik van de child selector van CSS 2.1.
Deze pagina goed schaalbaar. Druk maar eens op [F11] om de browser schermgroot te zetten, of verklein de viewport significant. De content blijft (binnen redelijke marges aan de gekozen afmeting) dead centered in de viewport van je browser staan.
Voor dit effect geldt verder, dat je pagina in Quirks Mode moet laten renderen en dat er een bijzonder stijlblad, specifiek voor Internet Explorer bij nodig is. Voor meer details daarover, zie simuleren frames.
Voor meer details over de opmaak van deze pagina, zie het stijlblad. Voor meer over ontwerpen voor het world wide web zie PretLetters pagina's over Webontwerp, in het bijzonder die over Liquid Design en CSS.
Check ook even de Test directory. Daar bevinden zich verschillende test- en voorbeeldpagina's waarvan er sommige relevant kunnen zijn bij het onderwerp van deze pagina. Bijvoorbeeld frameless frames in IE, een HTML4.01 Strict/CSS2.1 validerende pagina, geheel voor Internet Explorer geschreven (in het Engels), die een variant gebruikt van de hier getoonde techniek.