2nd box Fluid with 1st, 3rd and 4th fixed width

dabblet.css

/**
 * 2nd box Fluid with 1st, 3rd and 4th fixed width
 */
 
.box {
 float: left;
 box-sizing: border-box;
 border: 1px solid black;
}

.inner {
	margin: 1em;
	background-color: rgba(0,0,0,0.05);
}

.box--non-fluid {
	width: 300px;
	min-height: 300px;	
	background-color: rgba(0,255,0,0.5);;
}

.box--non-fluid:first-child {
	position: absolute;
}

.box--fluid {
	width: 100%;
	min-height: 300px;	
	margin-right: -600px;
	padding-left: 300px;
	padding-right: 600px;
	background-color: rgba(255,255,0,0.5);
}

dabblet.html

<div class="box box--non-fluid"><div class="inner">non-Fluid</div></div>
<div class="box box--fluid"><div class="inner">Fluid</div></div>
<div class="box box--non-fluid"><div class="inner">non-Fluid</div></div>
<div class="box box--non-fluid"><div class="inner">non-Fluid</div></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}