Flexibele layout

We maken een voorbeeld waarin de breedte van de layout afhankelijk is van de breedte van het browser venster. Dit bereiken we door de breedte op te geven in percentages in plaats van in pixels. Bekijk ook dit voorbeeld (wel je browser-venster verkleinen en vergroten om het effect te zien!).

Dit is de structuur

links
main
rechts

En dit is het stylesheet

body
{
	margin:0;
	padding:0;
	background:#eee;
	font:Verdana, Arial, Helvetica, sans-serif;
}

#page
{
	margin: 0 auto; /*boven en onder geen marge, en horizontaal centreren*/
	width:80%; /*breedte is 80% van de parent, in dit geval dus van het browser venster*/
	max-width:1200px; /*zorgt ervoor dat op brede monitoren de regels niet te lang woden, waardoor de tekst niet meer leesbaar is --werkt niet in ie6-- */
	min-width:400px;
}

#header
{
	min-height:120px;
	background:#ccc;
}

#sidebarLeft
{
	float:left;
	width:20%; /*breedte is geraleteerd aan de parent, in dit geval dus van #page*/
	min-height:400px;
	background:#999;
}

#main
{
	float:left;
	width:50%; /*breedte is geraleteerd aan de parent, in dit geval dus van #page*/
	min-height:400px;
	background:#fff;
}

#sidebarRight
{
	float:left;
	width:30%; /*breedte is geraleteerd aan de parent, in dit geval dus van #page*/
	min-height:400px;
	background:#999;
}

#footer
{
	height:80px;
	background:#ccc;
	clear:both;
}

Opdrachten

  1. Maak zelf een apart CSS bestand en plaats de stijlregels van het voorbeeld in dit stylesheet.  Koppel dit stylesheet aan een nieuw (x)html bestand.
  2. Geef #main een padding. Wat gebeurt er, en waarom. (denk aan het boxmodel)
  3. Wat zou een oplossing kunnen zijn? Bijvoorbeeld een child div maken in #main.
  4. Noem tenminste een voordeel en een nadeel van de deze oplossing.