stijnj

/**
 * ...
 */
.container { width: 100%; background: red; }
ul { background: white; display: inline-block; position: relative; margin: 0 0 0 200px; }
ul:before { content: ''; display: block; width: 200px; height: 100%; position: absolute; left: -200px; background: white; }

stijnj

/**
 * Waarom is de lijn onder de tekst niet rood?
 */
h2 { color: red; }

stijnj

/**
 * Floats: clearfix
 */

div {
	width: 200px;
	border: 1px solid black;
}
span {
	float: left;

stijnj

/**
 * Floats
 */

.foo {
	float: left;
}
.bar {
	float: right;
}

stijnj

/**
 * Position: fixed
 */

.bar {
	position: fixed;
	left: 20px;
	top: 50px;
	width: 100px;
	background: blue;

stijnj

/**
 * Position: relative + absolute
 */

.bar {
	position: absolute;;
	left: 20px;
	top: 20px;
	width: 100px;
	background: blue;

stijnj

/**
 * Position: relative
 */

.bar {
	position: relative;
	left: 20px;
	top: 20px;
	width: 100px;
	background: blue;

stijnj

/**
 * Position: absolute
 */

.bar {
	position: absolute;
	right: 0;
	top: 0;
	width: 100px;
	background: blue;

stijnj

/**
 * Position: static
 */

.bar {
	position: static;
	width: 100px;
	background: blue;
	color: #fff;
}

stijnj

/**
 * Box-model: content-box vs. border-box
 */
div {
	width: 300px;
	border: 1px solid black;
}
span {
	box-sizing: border-box;
	display: inline-block;