Faux columns

Uit de recente zoektermen kwam ik te weten dat velen aan het zoeken waren hoe je nu faux columns moet maken, ook wel valse kolommen genaamd.

Je kan deze uitleg vinden op allerhande engels-talige websites, maar natuurlijk niet in het vlaams, of voor de nederlanders: in het nederlands ;-) .

Wat zijn faux columns

A simple method of making CSS columns appear equal in length, regardless of the content that they contain.

Wat we willen bereiken

Dit is wat we willen bereiken

Wat we in de plaats krijgen

wat we hebben wat we tot nu toe hebben

Hoe ga je nu te werk

we nemen dus gewone XHTML code, zoals den deze hier:

<div id="container">
<div id="header">
De header voor je logo ofzo
</div>
<div id="left">
dit is de linker kolom of navigatie ofzo
</div>
<div id="main">
Deze kolom bevat de hoofdinhoud
</div>
</div>

om daarna direct over te gaan naar ….

De CSS

Om een gecentreerd layout te krijgen starten we met:

body {
text-align: center; /*voor IE*/
}
#container {
width: 600px;
text-align: left; /*voor IE */
margin: 0 auto;
}

De truck met de achtergrondafbeelding

Om nu ook echt 2 kolommen evenhoog te krijgen moet je een achtergrond afbeelding gebruiken die herhaald wordt over dat gedeelte welk de meeste inhoud heeft, dus als gevolg daarvan zal de met minder inhoud voorziene kolom evenhoog zijn, als die met meer inhoud.

Bekijk hier een afbeelding die je hiervoor zou kunnen gebruiken.

Dus we moet de CSS updaten:

#container {
width: 600px;
text-align: left; /*voor IE */
background: #bbff02 url(2faux.gif);
margin: 0 auto;

Nu nog de kolommen positioneren

Nu moeten de kolommen nog op hun plaats gezet worden, dit doen we zo:

#left {
width:200px;
color:#000;
}
#main {
margin-left:200px;
color:#000;
}

Oeps nog een probleem

Waarschijnlijk zal je gemerkt hebben dat de achtergrond afbeelding niet doorloopt tot onderen in Firefox en Opera ?
Goed opgemerkt, daarvoor staat de Giga-overflow-hack ter beschikking.

Dus update je CSS nog één keer:

#container {
width: 600px;
text-align: left; /*voor IE */
background: #bbff02 url(2faux.gif);
overflow: hidden;
margin: 0 auto;

Besluit

Zo nu heb je faux columns, 2 evenredige kolommen in hoogte, om het even welke ervan meer inhoud heeft.