Untitled

dabblet.css

	/**
	 * CSS-only: How can I center fixed width div between two divs that fill the remaining space?
	 */
	
	#main {
		height: 40px;
		width: auto;
		border: 1px solid #cfcfcf;
		position: relative;
	}
	
	.half {
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
	}
	
	.half.left { left: 0; }
	.half.right { right: 0; }
	
	.half > div {
		height: 100%;
		padding:0 8px;
	}
	
	.half.left > div { padding-left: 7px; }
	.half.right > div { padding-right: 7px; }

	.col {
		height: 100%;
		margin-top: 3px;
	}
	
	#a,
	#c {
		background-color: green;
	}
	
	#b {
		background-color: red;
		margin-left: auto;
		margin-right: auto;
		width: 14px;
	}

dabblet.html

	<div id="main">
		<div class="half left">
			<div>
				<div id="a" class="col"> </div>
			 </div>
		</div>
		<div class="half right">
			<div>
				<div id="c" class="col"> </div>
			 </div>
		</div>
		<div id="b" class="col"> </div>
	</div>
	

settings.json

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