@charset "utf-8";
#container {
	width: 100%; /*relative houdt in dat alle 'kinderen' van deze container (child elements) --mits ze absoluut gepositioneerd zijn-- zich gaan gedragen naar de randen van het 'ouder' element (parent element). Dat stelt je in staat de footer onder de content te krijgen omdat de onderste rand van #container het referentiepunt is voor de footer.*/
	min-height: 100%; /*De min-height geeft de minimale hoogte aan. Het element mag wel hoger zijn, maar niet lager dan de gegeven waarde. Let op: min-height wordt niet ondersteund door IE daarom wordt er later nog eens de waarde in IEtaal vast gezet je zal dit manueel moeten toevoegen aan het styleblad*/
	_height: 100%; /*eigenschappen met een underscore zijn voor (vanaf) IE6. Let op: je zal dit manueel moeten toevoegen aan het styleblad*/
	background-color: #009900;/*bijkomende opties zijn achtergrondkleur, achtergrond afbeelding, ...*/
	margin-left:0px;/*margin: 0 auto; wordt vervangen door een negatieve waarde die de helft is van de breedte van de container*/
}
/* Dit heeft als resultaat een website met 2 kolommen opgebouwd uit nagenoeg semantische HTML die ook nog eens in alle browsers werkt! */




/* Noodzakelijke toevoegingen in de css-code. Typ de volgende regels erbij: */
* { 
margin: 0px;
padding: 0px;
} 

/*Opmerking: het sterretje (*) betekent "alle elementen", margin en padding staan voor afstanden. Zoals je hieruit op kunt maken zet je met deze regels alle afstanden op 0 pixels. Dat is nodig voor dezelfde weergave in alle browsers. Als je deze regels weg zou laten zou internet explorer bijvoorbeeld 2 pixels ruimte nemen, terwijl firefox 5 pixels ruimte neemt. Nu weten alle browsers wat ze moeten doen, geen ruimte toekennen aan geen enkel element.*/ 

html,body {
height: 100%; /* HEEL BELANGRIJK, de pagina vult nu het hele browservenster.*/
}
/*Opmerking 1: je definieert de hoogte voor zowel de html als de body. Deze wordt op 100% gesteld, zodat de hele viewport wordt bedekt in plaats van enkel het gebied waar de inhoud staat.*/ 

/*Opmerking 2: de body is de gehele pagina die wordt weergegeven. Als je hieraan eigenschappen meegeeft, worden deze door de hele pagina over genomen. Bijkomende elementen die aan de body kunnen toegewezen worden zijn: achtergrondkleur, lettertype en afmeting van het lettertype...*/




#header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height: 126px;
	background-color: #E3F473;
	background-image: url(gallerij/head.gif);
	background-repeat: no-repeat;
	z-index:100;
	background-position: right center;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #009900;
	
	
}



#zijkant {
	position:fixed;
	top:0;
	left:0;
	width: 150px;
	height: 520px;
	background-color: #E3F473;
	z-index:0;
	padding-top: 126px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}



#main {
	margin-top: 50px;
	margin-right: 60px;
	margin-left: 165px;
	padding-top: 150px;
	padding-left: 20px;
}




#footer {
	width: 900px; /*bij een absolute positioning krijgt de container een Width en Height*/
	height: 20px;
	clear: both;
	background-color: #009900;
}

.clear {
clear: both;
}


/* IE only */
* html container{
overflow: hidden;
padding: 100px 200px 0 0;
}

* html #header{
position: absolute;
}

* html #zijkant{
position: absolute;
}

* html #main{
height: 100%;
overflow: auto;
padding: 10px 20px 0 20px;
} 
/* Ik zet dus voor iedere declaratie: * html Alles wat dan in die declaratie volgt wordt alleen door IE opgepikt, andere browsers negeren het. */
/* Er zijn 2 belangrijke zaken die je IE moet vertellen zodat hij het begrijpt. Ten eerste begrijpt IE de waarde 'fixed' niet voor de declaratie 'position'. Dus maken we daar voor IE 'absolute' van.
Verder moeten we de scrollbalk van de 'body' uitzetten (overflow: hidden), om vervolgens de scrollbalk van de box 'content' weer aan te zetten (overflow: auto). */