Kolommen gelijk maken

Een veel voorkomend probleem in het webdesign is het probleem met ongelijke kolommen. De ene kolom bevat meer inhoud dat de andere en daardoor wordt deze langer dan de andere. Veel liever zou je willen zien dat de kolommen allemaal mooi gelijk zijn, nietwaar?

In deze blogpost ga ik uitleggen hoe je dat op kunt lossen, zonder CSS-hacks en zonder het cross-browser en de flexibiliteit uit het oog te verliezen. Ik laat hier een voorbeeld zien met 3 kolommen, maar het kan uiteraard ook met 2 of met meer dan 3 kolommen.

We beginnen met de HTML-code. Allereerst hebben we lege divs nodig die we om onze kolommen heen gaan zetten. De (Engelse) vakterm voor zo'n div is vaak 'container'. Voor iedere kolom hebben we een container-div nodig, dat zijn bij elkaar dus 3 container-divs. Ik geef deze 3 divs voor het gemak de id's 'container1', 'container2' en 'container3'. De container-divs komen in elkaar te staan, dus 'container1' staat in 'container2' en 'container2' weer in 'container3'. Deze container-divs zijn als het ware hulpstukken.

Verder hebben we de kolommen nodig waarin straks inhoud komt te staan. Ook dit zijn divs en die geef ik de id's 'column1', 'column2' en 'column3'. Deze divs komen echter niet in elkaar, maar los van elkaar in de HTML te staan. Onze HTML-code komt er dus zo uit te zien:

<div class="container3">
  <div class="container2">
    <div class="container1">
      <div class="column1">Kolom 1
      </div>

      <div class="column2">Kolom 2
      </div>

      &;lt;div class="column3">Kolom 3
      </div>
    </div>
  </div>
</div>

We gaan nu verder met de CSS. De eerste stap is het bepalen van de breedte van de container-divs. Dat doen we in procenten om onze website mooi flexibel te houden, ongeacht de schermresolutie van de bezoeker. Onze container-divs moeten allemaal 100% breed zijn om ons doel te bereiken. 100% is dus de volledige breedte van het bovenliggende object (In het geval van de binnenste container-divs is dit de container-div die om de betreffende container-div heen ligt, in het geval buitenste container-div is dit de body). In onze situatie zijn alle container-divs dus even breed, namelijk het hele scherm.

In de volgende stap maken we een begin met het positioneren van de container-divs. Om een element goed te kunnen positioneren moet je de CSS gaan vertellen waaraan het de positie van het element moet refereren. Dat doe je door middel van een 'float'. Een float bepaald de positie van een element ten opzichte van andere elementen. Als je divs in de HTML-code in elkaar plaatst, houd dat niet automatisch in dat de buitenste div zich aanpast aan de binnenste div. Wordt de binnenste div groter, dan blijft de buitenste gewoon zoals ie al was. Een float zorgt dat de buitenste div zich wel aanpast. Dit is wat we willen, dus we gaan als eerste onze container-divs een float geven:

.container3 {
    width:100%;
    float:left;
    background-color:blue;
}

.container2 {
    width:100%;
    float:left;
    background-color:yellow;
}

.container1 {
    width:100%;
    float:left;
    background-color:red;
}

In de CSS hebben we onze divs tevens een achtergrondkleur gegeven, zodat we goed kunnen zien wat er gebeurt als we verder gaan met de stappen in deze handleiding.

We hebben imiddels bereikt dat alle container-divs in elkaar staan, even breed zijn en de hoogte aannemen van de inhoud die we aan het einde van deze tutorial gaan toevoegen. In de browser ziet het er nu zo uit:

We zijn duidelijk nog niet klaar. De container-divs zijn eigenlijk een trucje om de feitelijke kolommen allemaal even hoog te laten lijken. Een stukje gezichtsbedrog dus eigenlijk, want in werkelijkheid zijn de kolommen zelf helemaal niet gelijk en dat zullen ze ook nooit worden zolang je ze geen hoogte geeft (en we geven geen hoogte omdat we de hoogte automatisch willen aanpassen aan de hoogte van de inhoud).

De laatste stap in het positioneren van de container-divs is het geven van marges aan de zijkanten van de container-divs, waardoor ze elkaar deels gaan overlappen. Op deze manier zie je van iedere container-div een deel wel en een deel niet. Hiermee bereiken we het visuele effect van 3 gelijke kolommen (de container-divs zijn immers allemaal even hoog door de floats die we eerder gaven).

Om marges te kunnen geven, moeten we de container-divs eerst vertellen hoe ze zich moeten positioneren. Dan doen we door ze 'position:relative' mee te geven. Dit houd in dat het element zich positioneert in verhouding tot zijn normale positie. Als we dan een marge geven van 30%, dan weet de div dat hij 30% moet opschuiven ten opzichte van waar hij stond voordat we de marge gaven.

De marge zelf stellen we in door te zeggen 'right:30%' (30% kan ook een andere waarde zijn, naar wens). De div schuift nu 30% naar links, zodat er rechts van de div een ruimte ontstaat (de marge dus). Dit gaan we doen met de twee binnenste container-divs. De buitenste niet, want die moet zo ver mogelijk rechts blijven staan. De middelste container-div geven we een marge van 30%. Hierdoor wordt (aan de rechterkant) 30% van de buitenste container-div zichtbaar. De binnenste container-div geven we een marge van 40%. Hierdoor wordt (in het midden) 40% van de middelste container-div zichtbaar. We kunnen nu dus 30% van de buitenste container-div zien en 40% van de middelste container-div.

Nu zal je wellicht denken, als de breedte al 100% en je daar dan een marge bij op telt, dan worden je container-divs toch breder dan je scherm? Dat klopt. En daarom voegen we aan de buitenste container-div een 'overflow:hidden' toe. Deze zorgt ervoor dat alles wat uit steekt, onzichtbaar wordt.Op deze manier blijft het totaal 100% en zien we dus automatisch van de binnenste container-div 100% - 30% -40% = 30%.

.container3 {
   width:100%;
   float:left;
   background-color:blue;
   position:relative;
   overflow:hidden;
}

.container2 {
   width:100%;
   float:left;
   background-color:yellow;
   position:relative;
   right:30%;
}

.container1 {
   width:100%;
   float:left;
   background-color:red;
   position:relative;
   right:40%;
}

Na deze aanpassingen hebben we het volgende resultaat:

Voor het oog hebben we nu 3 kolommen, die altijd allemaal even hoog zullen zijn, ongeacht de inhoud. Met de container-divs zijn we nu dus klaar.

Zoals je wellicht is opgevallen zijn de tekstjes die we in de kolommen hadden gezet, verdwenen. Dat komt omdat we met de kolommen zelf nog niets hebben gedaan. Daar zullen we nu dus mee verder gaan.

Als eerste gaan we een paar dingen herhalen die we zojuist ook met de container-divs hebben gedaan. We geven floats en zetten de position op 'relative'. Daarnaast heb geven we de kolommen een background-color zodat we precies kunnen zien wat we doen. We voegen de volgende code toe aan onze CSS:

.column1 {
    float:left;
    position:relative;
    background-color:lime;
}

.column2 {
    float:left;
    position:relative;
    background-color:aqua;
}

.column3 {
    float:left;
    position:relative;
    background-color:fuchsia;
}

Voor het oog is er nu nog niet zoveel gebeurt, behalve dat het geheel nog korter is geworden. We zien echter nog steeds onze kolommen niet terug.

De twee dingen die we nog moeten doen is het geven van een breedte aan de kolommen en het geven van marges om ze op de juiste plaats te laten verschijnen. De kolommen bevatten de feitelijke inhoud van de website, zoals teksten en plaatjes. De kolommen moeten dus de breedte krijgen die we met de container-divs al hebben gesimuleerd. Met andere woorden: De kolommen moeten precies in de gekleurde vakken gaan passen. Om de breedte van elke kolom te bepalen kijken we naar de ruimtes die we in de container-divs hebben gecreëerd.

We zien dan dat 'container2' een marge heeft aan de rechterkant van 30%, waardoor er dus 30% van 'container3' zichtbaar is. 'col3' moet dus 30% breed worden om in het zichtbare deel van 'container3' te passen.

'container1' heeft een marge aan de rechterkant van 40%, waardoor er 40% van 'container2' zichtbaar is. 'col2' moet dus een breedte krijgen van 40% om in 'container2' te passen.

De afmeting van 'col1' is het deel dat overblijft na aftrek van de eerdere 30 en 40%. Dat is dus 100-30-40= 30%. 'col1' moet dus 30% breed worden om in 'container1' te passen.

.column1 {
    float:left;
    position:relative;
    background-color:fuchsia;
    width:30%;
}

.column2 {
    float:left;
    position:relative;
    background-color:fuchsia;
    width:40%;
}

.column3 {
    float:left;
    position:relative;
    background-color:fuchsia;
    width:30%;
} 

De kolommen hebben nu de juiste afmeting. Als je in de browser gaat kijken wat er is gebeurt kan je zien dat er nu een roze vlak met de tekst 'Kolom 3' staat, waar eerder het rode vak was. We schieten dus al op. Zie onderstaande afbeelding:

Nu het laatste stukje: De marges. We zien nu maar 1 kolom (namelijk 'col3'), omdat we de kolommen nog niet op de goede plek hebben gezet. Dat gaan we nu doen en dan doen we op dezelfde manier als dat we eerder met de container-divs hebben gedaan, maar nu de andere kant op. We geven nu dus geen marges aan de rechterkant, maar juist aan de linkerkant.

Eigenlijk is het bepalen van de marges in dit geval heel simpel. De kolommen krijgen allemaal een marge van 70% aan de linkerkant. Ze staan namelijk al tegen elkaar aan (door de floats die we eerder hebben gegeven), dus we hoeven er alleen nog maar voor te zorgen dat ze allemaal opschuiven. Dat doen we door het totaal aan marges die we aan de rechterkant van de container-divs hebben gegeven, aan de linkerkant van iedere kolom te geven. Zo komen de marges van de container-divs, verrekend met de marges van de kolommen, dus weer op 0 en staat alles keurig op de goede plaats.

.column1 {
    float:left;
    position:relative;
    background-color:fuchsia;
    width:30%;
    left:70%;
}

.column2 {
    float:left;
    position:relative;
    background-color:fuchsia;
    width:40%;
    left:70%;
}

.column3 {
    float:left;
    position:relative;
    background-color:fuchsia;
    width:30%; 
    left:70%;
}

Resultaat:

Zoals je waarschijnlijk is opgevallen, kunnen we nu de container-divs niet meer zien. Dat komt door de achtergrondkleur die we aan de kolommen hebben gegeven. Dat hebben we puur en alleen maar gedaan om te kunnen zien hoe de kolommen zich gedragen. We gaan de achtergrondkleuren bij de kolommen nu weer verwijderen, omdat het juist de bedoeling is dat de container-divs de achtergrondkleuren gaan verzorgen, zodat de kolommen altijd even hoog lijken. Je werk moet er nu zo uitzien:

Probeer de kolommen nu maar eens de vullen met verschillende hoeveelheden tekst, en zie wat er gebeurt met de hoogte van de kolommen. Hier een voorbeeld:

Toch is het nu nog niet helemaal zoals we het graag zouden willen zien. De text staat nu precies tegen de randen van de (zichtbare) kolommen aan en daar willen we natuurlijk liever wat ruimte tussen. Om dit voor elkaar te krijgen gaan we paddings gebruiken.

Ook met de paddings gaan we werken met procenten. Dit zorgt ervoor dat de paddings ook netjes 'meerekken' bij hogere resoluties. Paddings worden altijd berekend aan de hand van de breedte van het bovenliggende element. Dat geldt dus ook voor de top- en bottom-paddings. Op deze manier blijven de paddings aan alle kanten altijd mooi gelijk, ook als de kolom heel hoog wordt.

Het opgeven van maten in procenten houd altijd in dat je een percentage berekend van het bovenliggende element. Je totaal mag dus nooit (onbewust) boven de 100% uitkomen (lager mag wel), want dan zou het betreffende element groter worden dan zijn 'parent'. In ons geval is de parent van alle kolommen 'container1'. Deze is 100% breed en alle kolommen samen zijn ook 100% breed. Per kolom is de breedte dus kleiner, namelijk 30%, 40% en weer 30%.

We beginnen met 'col3'. Als we ruimte vrij willen maken voor de padding, moeten we dat dus aftrekken van de breedte van de kolom zelf, zodat het totaal van padding EN kolombreedte uitkomt op de 30% die 'col3' nu breed is (tevens het zichtbare deel van de groene container-div). Over de top- en bottom padding hoeven we ons geen zorgen te maken, want deze wordt automatisch hetzelfde als de left- en right padding.

We willen een padding van 1%. Dat moeten we aftrekken van de breedte van de kolom. Bedenk echter wel, dat er zowel aan de linker- als de rechterkant een padding van 1% komt. Totaal zal er dus sprake zijn van 2%. We moeten dus 2% van de breedte van de kolom aftrekken: 30% - 2% = 28%.

Deze stappen herhalen we voor kolom 1 en 2. De code ziet er nu als volgt uit:

.column1 {
    float:left;
    position:relative;
    width:28%;
    padding:1%;
    left:70%;
}

.column2 {
    float:left;
    position:relative;
    width:38%;
    padding:1%;
    left:70%;
}

.column3 {
    float:left;
    position:relative;
    width:28%; 
    padding:1%;
    left:70%;
}

Het resultaat moet er zo uitzien:

Zoals je nu ziet is er een kleine ruimte ontstaan tussen te tekst en de randen van de kolommen. Het geheel oogt nu netjes en overzichtelijk.

Dat was het voor zover deze tutorial. Ik hoop dat je er wat aan hebt en ik zou het leuk vinden als je een reactie achterlaat met je mening over deze tutorial. Als er nog andere problemen zijn waar je tegen aan loopt hoor ik het ook graag. Wie weet kan ik daar ook een tutorial over schrijven.