Valse kolommen in CSS (faux columns)
Bij website’s met meerdere kolommen is een probleem waar veel designers tegenaan lopen het feit dat, wanneer deze kolommen andere achtergrond kleuren hebben, de ene kolom verticaal verder doorloopt dan de andere. Iedereen die hier al eens tegenaan is gelopen weet de oplossing, en houd daar ook rekening mee, voor de genen die nog niet weten hoe dit op een erg simpele wijze is op te lossen, hier een korte uitleg.
Wanneer je in CSS aan het werk bent zul je al snel merken dat een div horizontaal altijd automatisch de volledige breedte pakt, tenzij anders aangegeven in het stylesheet. Enigszins frustrerend is het feit dat dit verticaal niet mogelijk is. Wanneer je dus bijvoorbeeld een website hebt met twee kolommen, en de ene kolom bevat meer inhoud dan de andere, dan zal de ene uitrekken en de andere zal op zijn normale maat blijven, en niet uitrekken tot onderen. In veel gevallen is dit geen probleem, bijvoorbeeld wanneer de achtergrond dezelfde kleur heeft, omdat het dan niet zichtbaar is.
In het bovenstaande figuur zijn de eerste twee voorbeelden hoe we het niet willen zien, de kolommen lopen niet door. Het derde voorbeeld is wat we wel willen zien, de kolommen lopen door. Er zijn verschillende manier om dit probleem op te lossen, de mogelijkheid die ik prefereer zal ik hieronder uitleggen.
De oplossing
Een oplossing om de div’s beiden even hoog te maken, ongeacht de content bestaat, door gebruik te maken van javascript, deze oplossing is echter verre van ideaal. De oplossing die ik daarom gebruik is de oplossing (de titel verraad het al) met de valse kolommen (faux columns genoemd). Als bezoekers van de website lijkt het net alsof er twee of meerdere kolommen zijn met verschillende achtergrondkleuren, maar in werkelijkheid staan de kolommen in een andere div, die de schijn wekt alsof alle kolommen even lang zijn.
[html]<div id="holder">
<div id="left">
Linker kolom
</div>
<div id="right">
Rechter kolom
</div>
</div>[/html]
In dit voorbeeld zie je de html code die nodig is om twee kolommen weer te geven die altijd even hoog zijn. De “holder” is erg belangrijk, deze houd de linker en rechter kolom niet alleen vast maar zorgt er ook voor dat het lijkt alsof beide kolommen even ver doorlopen.
[css highlight="3"]#holder {
width: 900px;
background: #fff url(fauxcolumns.png);
overflow: hidden;
}[/css]
Dit effect wordt gecreëerd door de achtergrond afbeelding (fauxcolumns.png) van de “holder” deze achtergrond afbeelding bevat de kolommen, aangezien de “holder” mee-rekt met beide kolommen lijkt het altijd alsof beide kolommen even hoog zijn. Een voorbeeld afbeelding vind je hier. Aan te raden is om deze afbeelding slechts 1px hoog te maken, en de precieze breedte van de holder.
De laatste stap is het positioneren van de linker en rechter kolom, dat doen we op de volgende manier:
[css]#left {
width: 180px;
color: #fff;
}
#right {
margin-left: 180px;
color: #000;
}[/css]
Succes
Op deze manier is het dus mogelijk om zeer gemakkelijk twee kolommen op de juiste manier weer te geven, succes met het toepassen! Dit is het tweede artikel in een reeks van meerdere artikelen over CSS, het vorige artikel ging over de CSS shorthand properties.
Het volgende artikel in deze reeks zal gaan over de positionering van elementen, suggesties zijn altijd welkom.
Dank! Duidelijk verhaal. Ben weer geholpen.