Fixed ↔ Fluid Width Transitions

dabblet.css

/* Fixed ↔ Fluid Width Transitions */
#outer {
	display: block;
	background: #fff;
	width: 0;
	overflow: visible;
	padding: 1em;
	margin: 0 auto; /*center on page*/
	-webkit-transition: width 1s linear;
}
	#inner {
		display: block;	
		background: #ddd;
		min-width: 4in;
		margin: 0 -2in;/*center within #outer*/
		border: 1px solid #666;
		-webkit-transition: margin 1s linear;
		border-radius: .5em;
	}
	
		#inner p {
			padding: .5em 1em .75em 1em;
			margin: 0;
		}

#toggle {
	margin: auto;
	display: block;
}

	#toggle:checked ~ #outer {
		width: 90%;
	}
	
		#toggle:checked ~ #outer #inner{
			margin: 0;
		}

dabblet.html

<input id='toggle' type='checkbox'/>
<div id='outer'>
	<div id='inner'>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae urna et ante condimentum elementum. Fusce ut tellus nisi, at pellentesque est. Sed tristique velit nec metus tempor vitae convallis arcu aliquet.</p>
		<p>Nulla consectetur quam nec urna scelerisque vel dapibus nunc ullamcorper. Duis in sapien vitae mauris bibendum porta at nec eros. In consectetur magna sit amet odio elementum tempus. Fusce vel turpis nisl, sed mollis magna.</p>
		<p>Curabitur nibh massa, gravida et dapibus quis, molestie et enim. Vivamus ut risus elit. Nam facilisis fringilla lectus ac luctus. Nunc pellentesque elit eget nulla euismod congue. Sed cursus justo at orci dictum volutpat.</p>
	</div><!--#inner-->
</div><!--#outer-->

settings.json

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