Hoe maak je een flexibele layout met meerdere kolommen in HTML en CSS

door Kris Bergstra · 11 maart 2013

Een website bestaat vaak uit meerdere kolommen. In deze tutorial wil ik je laten zien hoe je een webpagina maakt die bestaat uit 4 kolommen. Deze kolommen hebben een flexibele breedte, afhankelijk van de breedte van het beeldscherm. Let op, ik heb de webpagina niet responsive gemaakt.

Foto portfolio of kranten ‘look’

De 4 kolommen website zie je vaak terug bij websites die het uiterlijk van een krant weergeven of bij een website waar je een foto portfolio in wilt maken. Dat laatste gaan we dan ook oppakken.

Om dit te bewerkstelligen zul je ten eerste een webpagina moeten opzetten die bestaat uit een header en vier divs om de kolommen mee te gaan maken. Ook moeten we een achttal afbeeldingen hebben die we er in gaan plaatsen.

Gratis afbeeldingen

Voor deze afbeeldingen maak ik gebruik van een website waar gratis afbeeldingen te vinden zijn en ook te gebruiken. sxc.hu.

We gaan eerst maar eens een html pagina bouwen zodat we de basis hebben staan.

De kolommen vullen we in eerste instantie met dummie tekst.

De HTML code:

<!DOCTYPE html>
<html lang="nl">
<head>
	<meta charset="utf-8" />
	<title>Untitled</title>
	<link rel="stylesheet" href="stijl.css" type="text/css" media="all" />
</head>
<body>
 
	<div id="header">
 
	</div>
 
	<div id="Linkerkolom">
		<p>Cras mattis pharetra felis, non tristique diam varius eu.
		Fusce varius varius nisi ac tincidunt. Maecenas sed lorem nisl.
		Duis viverra dolor id arcu laoreet porta. Praesent in dui lorem,
		sed varius velit.</p>
		<p>Duis pharetra, est vel fringilla laoreet,
		mauris mauris vestibulum est, quis vehicula justo lectus
		faucibus leo. Sed molestie elementum blandit. </p>
 
	</div>
 
	<div id="LinkerkolomBinnen">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Pellentesque iaculis mattis luctus. Sed eu libero at nisi
		sodales gravida.</p>
		<p>Integer neque purus, tristique convallis
		pulvinar mattis, egestas a justo. Nulla vitae nisi est.
		Quisque pellentesque nisi non justo varius eget aliquet
		libero pulvinar. Ut a tristique odio.
		Cras ultrices venenatis.</p></div>
 
	<div id="RechterkolomBinnen">
		<p>Integer neque purus, tristique convallis
		pulvinar mattis, egestas a justo. Nulla vitae nisi est.
		Quisque pellentesque nisi non justo varius eget aliquet
		libero pulvinar. Ut a tristique odio.
		Cras ultrices venenatis.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Pellentesque iaculis mattis luctus. Sed eu libero at nisi
		sodales gravida.</p>
		<p>Morbi eget augue sit amet enim auctor sagittis et vitae massa.
		Ut eu orci enim. Etiam vitae.</p>
	</div>
 
	<div id="Rechterkolom">
		<p>Morbi eget augue sit amet enim auctor sagittis et vitae massa.
		Ut eu orci enim. Etiam vitae.</p>
	</div>
 
</body>
</html>

Absoluut positioneren

De volgende stap is het absoluut positioneren van alle kolommen in CSS. Hiermee krijg je de kolommen op de juiste positie, iets wat ook wel te doen is met floating, maar in dit geval makkelijker de inhoud kan plaatsen.

Hiervoor maken we dus een stijlblad aan met de naam stijl.css. Een document waar ons HTML document al naar toe linkt.

#Linkerkolom {
position: absolute;
left:1%;
width:23%;
top: 4em;
background:#fff;
}
 
#LinkerkolomBinnen {
position: absolute;
left: 26%;
width: 23%;
top: 4em;
background: #fff;
text-align: justify;
border-width: 0;
}
 
#RechterkolomBinnen {
position: absolute;
left: 51%;
width: 23%;
top: 4em;
background: #fff;
}
 
#Rechterkolom {
position: absolute;
left: 76%;
width: 23%;
top: 4em;
background: #fff;
}

Zoals je ziet houden we vanaf de top een afstand van 4 em. Hierdoor kan de header er boven geplaatst worden.

Afbeeldingen plaatsen

Nu gaan we afbeeldingen plaatsen in de webpagina. Deze afbeeldingen gaan we mee laten schalen met de breedte van de kolom zodat het een mooi geheel wordt.

De eerste stap is een serie van acht afbeeldingen, twee per kolom.

Afbeeldingen schalen

We moeten nu nog zorgen dat de afbeeldingen een formaat aannemen die gelijk staat aan maximaal de breedte van de kolom.

img {
	border: 3px solid #666;
	max-width: 100%;
	height: auto;
}
 
@media screen {
  img {
  	width: auto; /* for ie 8 */
  }
}

Dit tweede stuk, vanaf regel 7 is nodig om het resultaat ook goed te krijgen in Internet Explorer 8. In versie 7 en 9 werkt het geheel zonder deze hack.

Hoe maak je een flexibele layout met meerdere kolommen in HTML en CSS

Foto portfolio of kranten ‘look’

Gratis afbeeldingen

Absoluut positioneren

Afbeeldingen plaatsen

Afbeeldingen schalen

1 reactie

Geef een reactie Reactie annuleren