Voor een klant ben ik een ontwerp van Photoshop Indesign aan het omzetten naar XHTML/CSS. Opzich geen heel lastig ontwerp, zeker ook omdat ik alle vrijheid heb in de HTML. Het is geen Plone site, dus ik heb geen last van reeds bestaande HTML.

De lastigheid bij dit ontwerp zit in de tekst. Het ontwerp heeft een vrij standaard drie kolommen opbouw: links navigatie, content in het midden en een extra kolom met extra's rechts. Breadcrumb erboven, footertje eronder. Redelijk standaard zoals ik zei. Maar nu moet de content ook worden verdeeld over meerdere kolommen...

Introducing the CSS3 Multi-Column Module

Maar ja, ik heb geen beschikking over CSS3. Als dat het geval was, dan had ik gebruik kunnen maken van de CSS3 Multi-Column Module.

Wat dan? Scripten. Het wordt Microsoft oplossing, dus het moet vast mogelijk zijn met .Net op de server wat rekenwerk uit te voeren en de te tonen content er in twee kolommen uit te trappen. Geen probleem lijkt me. Leuker is het natuurlijk als het toch in de browser wordt gedaan. Dan weet je zeker dat de berekende waarden kloppen en dat het er zo mooi mogelijk uitziet. Naar nu blijkt, kan dit...

Via Google kwam ik op CSS3 Multi-Column Layout Demonstration and Documentation uit. Dit is een oplossing op basis van JavaScript en een beetje CSS. Of misschien wel heel veel CSS. Het is namelijk een implementatie van de CSS3 Multi-Column Module op basis van JavaScript. Je kunt dus gebruik maken van de CSS3 tags in je stylesheet en de JavaScript zorgt ervoor dat dit goed wordt geimplementeerd. Fantastisch. Voor zover ik heb kunnen testen werkt de oplossing op Firefox, Opera en IE. Positief!