box-sizingで横幅の算出方法を指定する--FirefoxとSafariのCSS対応

「border-box」で表示できることのメリット

　box-sizingプロパティを「border-box」と指定して、パディングやボーダーを横幅に含めて表示できることのメリットは大きい。たとえば、次のサンプルでは<div>でマークアップした部分の横幅を50%と指定して、2段組みにしてレイアウトしたものだ。

　box-sizingプロパティを「border-box」と指定しているので、30ピクセルのパディングやボーダーは50%の横幅に含めて表示され、2段組みが崩れることはない。

Firefoxでの表示

Safari 3での表示

Operaでの表示

Internet Explorer 8（ベータ版）での表示

div	{
	width: 50%;
	border: solid 30px #ffaa00	padding: 30px;
	background-color: #ffff00;
	float: left;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	}

div#column02	{
	border-color: #00ffff;
	}

<div id="column01">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</div>


<div id="column02">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</div>

※ブラウザで表示を確認する