Kolommen met elkaar laten meeschalen

Bron: http://www.sceneone.nl/tips_tricks/schaalbare_kolommen.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Het is mij op deze website al regelematig gevraagd. Hoe krijg ik het toch voor elkaar om een paar naast elkaar geplaatste kolommen met elkaar te laten meeschalen?
Met andere woorden de kolom met de meeste inhoud (de hoogste dus) bepaalt de hoogte van alle kolommen.

Het antwoord is eigenlijk heel simpel: dat kan niet.....

Maaarrrrrr

We kunnen wel net doen alsof, dus rock 'n roll

We beginnen met 2 kolommen die we naast elkaar positioneren. We zetten ze in twee omvattende containers. Die hebben we later nog nodig. We moeten de binnenste container wel clearen omdat de boxen die erin zitten floaten. Dat doen we met de class clearfix

CSS: p{
padding: 0;
margin: 0 0 10px;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{
zoom: 1;
}

.container{
border: 1px solid green;
margin: 20px 0;
}

.inner-container{
border: 1px solid red;
}

.box{
border: 1px solid;
width: 225px;
float: left;
display: inline;
margin: 10px 20px 0 7px;
padding: 10px;
}
HTML: <div class="container">

<div class="inner-container clearfix">

<div class="box">
<p>Content voor box 1</p>
<p>Content voor box 1</p>
<p>Content voor box 1</p>
<p>Content voor box 1</p>
<p>Content voor box 1</p>
</div>

<div class="box">
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
<p>Content voor box 2</p>
</div>

</div>

</div>

bekijk het resultaat

Je ziet dat de boxen keurig hun eigen hoogte pakken, afhankelijk van de content.
Als je van te voren zeker weet hoeveel content de boxen zullen hebben dan kun je ze natuurlijk gewoon allemaal dezelfde hoogte geven. Je zet de hoogte gewoon in pixels in je stylesheet en je kolommen zullen allemaal even hoog zijn. Maar dat kan alleen als je heel zeker weet wat de inhoud van de kolommen gaat zijn.
Wij gaan er nu vanuit dat de inhoud van de kolommen verschillend kan zijn. Het moet bijvoorbeeld regelmatig aangepast kunnen worden.

Wat je verder ziet is dat de omliggende containers netjes meelopen.

Achtergrond afbeeldingen

Nu gaan we de kolommen achtergrond afbeeldingen geven, te beginnen met de bovenkant. Daar beginnen we met een achtergrondafbeelding die hoog genoeg is om ook de hoogste kolom af te vangen. Dat wil zeggen, ik heb hem nu 1500px hoog gemaakt, dus als een van de kolommen hoger wordt dan 1500px, dan gaat het fout. Je kunt zo'n achtergrond afbeelding natuurlijk net zo hoog maken als je zelf wilt.
Ik gebruik voor de positionering van de achtergrond afbeelding de eerste omliggende container.

De HTML die we gebruiken blijft hetzelfde als hierboven.
Aan de CSS voegen we een achtergrond afbeelding aan de eerste omliggende container toe:

CSS: .container{
border: 1px solid green;
background: url(kolommen_meeschalen/kolommen.gif) no-repeat top left;
margin: 20px 0;
}

bekijk het resultaat

Het is misschien nog een beetje lastig te zien vanwege al die borders om de boxen, maar als je goed kijkt zie je dat op deze manier de tekst mooi binnen die visuele kolommen valt. De fysieke kolommen met de class "box" hebben nog altijd gewoon hun eigen hoogte, dat kun je zien aan de zwarte borders.

Om het goed te begrijpen moet je mischien ook de achtergrond afbeelding die ik hierboven gebruik nog een keer bekijken.
Je ziet, het is gewoon een lang plaatje met die twee kolommen.

Nu kunnen we de tweede omliggende container gebruiken om op dezelfde manier de onderkant van de visuele kolommen te plaatsen. De HTML blijft weer hetzelfde en aan de CSS voegen we alleen een achtergrond afbeelding toe aan de tweede omliggende container:

CSS: .inner-container{
border: 1px solid red;
background: url(kolommen_meeschalen/onderkant.gif) no-repeat bottom left;
}

bekijk het resultaat

Als we nu de borders weghalen kunnen we het resultaat goed bekijken.

Nu kunnen we om het even welke kolom in hoogte aanpassen. In visuele zin zal het altijd lijken alsof de kolommen even hoog zijn.
Ze schalen altijd mee, of lijken dat in ieder geval te doen. In werkelijkheid zijn het natuurlijk de omliggende boxen die meeschalen. Als we dus de inhoud van de kolommen aanpassen ziet ons resultaat er ineens zo uit.

Je kunt deze methode natuurlijk ook uitvoeren met drie of meer kolommen.
Succes ermee!

naar het begin van de pagina