SGD-DESIGN
6/2/2012 - 6:44 PM

Fluid Content w/ a Fixed-Width Aside

Fluid Content w/ a Fixed-Width Aside

settings.json
content_copyfile_download
{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
dabblet.html
content_copyfile_download
<!-- content to be placed inside <body>…</body> -->
<div id="main">
	<div id="holder">
		<div id="right">Widgets Go Here</div>
		<div id="content">
			<div class="photo"></div>
			<div class="photo_set"></div>
			<div class="photo_set"></div>
			<div class="photo"></div>
			<div class="video"></div>
			<div class="photo_set"></div>			<div class="photo_set"></div>
			<div class="photo_set"></div>			<div class="photo_set"></div>
			<div class="photo_set"></div>			<div class="photo_set"></div>
		</div>
	</div>

</div>
dabblet.css
content_copyfile_download
/*
Fluid Content w/ a Fixed-Width Aside
*/
/**
 * The first commented line is your dabblet’s title
 */
#main {background: #f06;background: linear-gradient(45deg, #f06, yellow);
position:absolute; width:100%; min-width:980px;
padding:10px 0; box-sizing:border-box;}
#holder { margin-left:auto; margin-right:auto;
max-width:1280px;
}
#content {
	width:63.265306122449%; /*620px*/
	background:rgba(255,255,255,0.5);
	padding:10px; clear:left;}
#right{
	/*width:30.612244897959%x;*/
	width:300px;
	background:rgba(0,0,0,0.5);
	color:#fff;
	padding:10px; float:right;
	margin-left:20px;
	}
	.photo{}
	.photo_set{}
	.video{}