Voorbeeld 3 kolommen eenvoudige opmaak

dabblet.css

/**
 * Voorbeeld 3 kolommen eenvoudige opmaak
 */

html, body {
  height:100%;
  background-color:#333;
}

article, aside {
  background-color:#aaa;
  float: left;
  width: 250px;
  padding: 10px;  
  height: 100%;
}

div#container {
  width:830px;
  height:100%;
  margin-left:auto;
  margin-right:auto;
  background-color:#333;
}


aside#recensies {
  margin-right: 10px;
}

article#inhoud {
 margin: 0;
}

aside#impressie {
  margin-left: 10px;
}

div#footer {
  background-color:#aaa;
  padding: 10px;
  float:left;
  clear:both;
  width:810px;
  margin-top: 10px;
}


nav#hoofdmenu {
   background-color:#aaa;
   float:left;
   width:810px;
   margin-bottom: 10px;
   padding: 0 10px 0 10px;
}

nav ul {
  list-style:none;
  padding:10px 0 0 0;
  margin:0;
}

nav li {
  float:left;
  margin-left:10px;
  padding:10px 10px 4px 10px;
  background-color:#333;
  border-width: 1px 1px 0 1px;
  border-style:solid;
  border-color: #333;
}

nav a {
  text-decoration:none;
  color:white;
}

dabblet.html

<div id="container">
	<nav id="hoofdmenu">
		<ul>
			<li><a href="index.html">Home</a></li>
			<li><a href="practical.html">Openingstijden &amp; Prijzen</a></li>
			<li><a href="route.html">Routebeschrijving</a></li>
		</ul>
	</nav>
	<aside id="recensies">
		<blockquote>"De lessen webdesign zijn geweldig!"</blockquote>
	</aside>
	<article id="inhoud">
		Knight Rider, a shadowy flight into the dangerous world of a man who does not exist. Michael Knight, a young loner on a crusade to champion the cause of the innocent, the helpless in a world of criminals who operate above the law.Thunder, thunder, thundercats, Ho! Thundercats are on the move, Thundercats are loose. Feel the magic, hear the roar, Thundercats are loose. Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thunder, thunder, thunder, Thundercats! Thundercats!Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.
	</article>
	<aside id="impressie">
	       Bla lba
	</aside>
	<div id="footer">
	bla
	</div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}