Box-sizing property

by kmouse

HTML

<p>Setting the 'box-sizing' property on elements using the same width and height.</p>
<div>
	<div>box-sizing: content-box</div>
	<div class="border-box">box-sizing: border-box</div>
</div>
<div class="divisor"></div>
<p>The following boxes should line up side-by-side.</p>
<div>
	<div class="border-box float"></div>
	<div class="border-box float"></div>
</div>
<div class="divisor"></div>
<div>
	<div class="margin border-box float"></div>
	<div class="margin border-box float"></div>
	<div class="margin border-box float"></div>
</div>
<div class="divisor"></div>
<p>There should be no scrollbars, and no red visible.</p>
<div class="fill">
	<div class="border-box"></div>
	<div class="border-box"></div>
</div>

CSS

div > div {
	width: 50%;
	margin: 10px 0;
	padding: 20px;
	border: 10px solid #999;
	background-color: #aaf;
}
.border-box {
	background-color: #aea;
	box-sizing: border-box;
}
.float {
	float: left;
}
.margin {
	width: 23.3%;  /* width + margins should be 33.3% */
	margin-left: 5%;
	margin-right: 5%;
	border-width: 20px;
}
.fill {
	height: 200px;
	border: 15px solid #ffa;
	background: #f00;
	overflow: auto;
}
.fill > div {
	width: 100%;
	height: 50%;
	margin: 0 auto;
}
.divisor {
	background: #999;
	clear: both;
	overflow: visible;
	margin-top: 5px;
	/*margin-top: 150px;*/
	margin-bottom: 5px;
	padding: 1px;
	height: 4px;
}