CSS Example: "box-sizing: border-box"

dabblet.css

/**
 * CSS Example: "box-sizing: border-box"
 */
html {
	min-height: 100%;
	background: linear-gradient(-45deg, #FFF 0%, #EEE 100%);
}
 
#page {
	font-family: 'Lucida Grande', Verdana, Tahoma, sans-serif;
	width: 90%;
	max-width: 1440px;
	min-width: 800px;
	margin: 10px auto; 
	text-shadow: 0 1px 0 #FFF;
}

.wrap {
	margin: 0 auto 30px;
	border: 2px solid #CCC;
	background: #EEE;
	overflow: auto;
}

.wrap .float {
	width: 23%;
	float: left;
	border: 1px solid #123456;
	padding: 10px;
	background: #FFF;
	margin: 1%;
	box-shadow: 0 5px 7px rgba(0,0,0,0.05);
}

.lazy .float {
	width: 20%;
}

.borderbox .float {
	box-sizing: border-box;
}

dabblet.html

<div id="page">
<h1>CSS Example: "box-sizing: border-box"</h1>
<p>In each example, I use the following markup:</p>
<pre>
&lt;div class="wrap"&gt;
	&lt;div class="float"&gt;Float 1&lt;/div&gt;
	&lt;div class="float"&gt;Float 2&lt;/div&gt;
	&lt;div class="float"&gt;Float 3&lt;/div&gt;
	&lt;div class="float"&gt;Float 4&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>I want each of these boxes to float next to each other in one row and fill the space. If I know the size of the containing box, no problem. I just use pixel widths for each float equal to &frac14; of the container's size (and do a little math to make up for borders, padding, etc.)</p>
<p>But what if I don't know the width of the container? Or I want it to be fluid? That's where box-sizing: border-box; comes in.</p>
<p>In each example, each floted box has 1% margin, 1px border and 10px padding on each side.</p>
<h3>Example 1</h3>
<p>In Example 1, each floated div is 23% of the container's width (25% - 2% left/right margins = 23%). Notice how the fourth div gets bumped down to the next line because the divs are too wide to fit.</p>
</p>
<pre>
.wrap .float {
	border: 1px solid #123456;
	padding: 10px;
	margin-left: 1%;
	width: 23%;
	margin-right: 1%;
}
</pre>
<div class="wrap">
	<div class="float">Float 1</div>
	<div class="float">Float 2</div>
	<div class="float">Float 3</div>
	<div class="float">Float 4</div>
</div>

<h3>Example 2</h3>
<p>In Example 2, I try to fix the problem from Example 1 by using a smaller width. This works to get them all on the same line, but the divs now don't fill the space.</p>
<pre>
.wrap.lazy .float {
	width: 20%;
}
</pre>
<div class="wrap lazy">
	<div class="float">Float 1</div>
	<div class="float">Float 2</div>
	<div class="float">Float 3</div>
	<div class="float">Float 4</div>
</div>
<h3>Example 3</h3>
<p>In Example 3, I use box-sizing: border-box; to change the box model used for the floated divs. Normally, the total width of a div is a total of the div's width, padding and border, which fit "outside" of the div's defined width; with border-box, borders and paddings fit "inside" the defined width.</p>
<p>So, I can continue to use a percentage to define the width of a box, but use pixel sizes for its padding and border. Notice that all 4 floated divs appear on the same line and fill the space of the containing div.</p>
<pre>
.borderbox .float {
	box-sizing: border-box;
	margin-left: 1%;
	width: 23%;
	margin: right: 1%
}
</pre>
<div class="wrap borderbox">
	<div class="float">Float 1</div>
	<div class="float">Float 2</div>
	<div class="float">Float 3</div>
	<div class="float">Float 4</div>
</div>
</div>

settings.json

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