Fluid + Fixed divs

dabblet.css

/**
 * Fluid + Fixed divs
 * To use this method, firstly you need to set the container's box-sizing
 * to border-box. This method wil still work without it, but it helps
 * to prevent a horizontal scrollbar that may exist due to the use
 * of this method. 
 * Secondly, add a padding-right or padding-left (depending on
 * where the sidebar is) of the width of your sidebar to the
 * container. Also, add a relative position to it.
 * Set the sidebar to position absolute, with 0 for the top
 * and right properties.
 * Do NOT set a width for the main div, it will automatically
 * fill the width of the container (unless you float it, so
 * don't do that ;) ) Therefore, you must use the containers
 * width to set the main width.
 * WARNING: ONLY TESTED IN CHROME DEV, YOU MAY WANT TO TEST
 * FURTHER BEFORE PRODUCTION USE.
 */
* { padding: 0; box-sizing: border-box;  0; margin: 0; }
body { background: #fafafa; }

.container {
	position: relative;
	width: 100%;
	max-width: 700px;
	margin: auto;
	padding-right: 100px;
}
.sidebar {
	width: 100px;
	float: right;
	margin-right: -100px;
	background: #55bada;
}
.main {
	background: #bada55;
	float: left;
}
.clear {
	width: 100%;
	height: 0px;
	clear: both;
}

dabblet.html

<div class="header">Header stuff.</div>
<div class="outer">
	<div class="container">
		<div class="main">Content will go here. Ideally it wouldn't start shrinking until the browser window was literally too small to fit it in. With this, being set to a percentage, it shrinks much earlier.</div>
		<div class="sidebar">The only problem with this is that the footer doesn't appear underneat the sidebar because the sidebar is absolutely positioned.</div>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="footer">Footer lolage</div>

settings.json

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