Kolommen allemaal even hoog met css
De vierdeklassers zijn de website met css aan het afronden en je krijgt dan toch allerlei leuke vragen voor de kiezen. Zo wilde een leerling graag dat de achtergrondkleur van zijn drie kolommen even lang werden. Wat hij dus niet wilde was het voorbeeld zoals in http://nicole.ostrea.in/nietevenhoog.html Het paarse en groene vlak moeten even hoog worden als het blauwe vlak. Voor een website met tabellen is dat appeltje eitje maar met css is dat nog niet zo eenvoudig. Je kunt het oplossen met javascript of met een kleine afbeelding die je langs de y-as herhaalt. Bij de laatste oplossing zal de website dan wel een vaste breedte moeten hebben. Maar ook met css vond ik een mooie oplossing. Ten eerste maak je een hele grote padding voor alle drie de kolommen, de lengte maakt niet uit. Ik heb hem op 2000 pixels gezet. Vervolgens maak je een negatieve bottom-margin die precies even groot is. En tenslotte zet je die drie kolommen in een container div waar je de overflow op hidden zet. Het resultaat is te zien in http://nicole.ostrea.in/evenhoog.html en het css bestand is dan in dit geval http://nicole.ostrea.in/evenhoog.css Nu kan ik tenminste met een gerust hart gaan slapen ...