CSS3 Calc Function

This demo shows how to use CSS3 calc function for calculating length.

A
B
C

Codes

.wrapper {
	width: 700px;
	margin: 50px auto 0;
	height: 500px;
}
.col {
	width: -webkit-calc(100% / 3);
	width: -moz-calc(100% / 3);
	width: calc(100% / 3);

	float: left;
	height: 100%;
	text-align: center;
	font-size: 50px;
	color: #fff;
	line-height: 300%;
	font-weight: bold;
}
.col.one {
	background-color: #3b3140;
}
.col.two {
	background-color: #bfb8a3;
}
.col.three {
	background-color: #f2e0c9;
}
Fork me on GitHub