taeo · November 9, 2012 18:46
diff --git a/fluid_fixed.html b/fluid_fixed.html
 <!doctype html>
 <html>
 <head>
 <title>Layouts: Fluid &gt; Fixed</title>
 <style type="text/css">
 html {
 	margin: 0;
 	padding: 0;
 }
 body {
 	color: #555;
 	font-family: Helvetica, Arial, Sans-serif;
 	font-size: 14px;
 	font-weight: lighter;
 	line-height: 1.6em;
 	margin: 0;
 	padding: 0 20px;
 }
 h1, h2 {
 	color: #333;
 	font-weight: bold;
 }
 small {
 	color: #ccc;
 }
 strong {
 	font-weight: bold;
 }
 img {
 	height: auto;
 	max-width: 100%;
 }
 ul {
 	padding-left: 20px;
 }

 header,
 footer {
 	background-color: #333;
 	color: #fff;
 	margin-left: -20px;
 	margin-right: -20px;
 	position: relative;
 }
 header {
 	margin-bottom: 30px;
 	padding: 30px 20px;
 }
 header h1 {
 	color: #fff;
 	margin: 0;
 	padding: 0;
 }
 footer {
 	margin-top: 30px;
 	padding: 8px 20px;
 }
 .banner {
 	height: 110px;
 }
 .container {
 	width: 100%;
 }
 .fluid {
 	float: left;
 	width: 100%;
 }
 .fluid-fixer {
 	margin-right: 240px;
 }
 .fixed {
 	float: left;
 	margin-left: -220px;
 	width: 220px;
 }
 .lists > div {
 	float: left;
 	margin: 0 0 18px 3%;
 	padding: 0;
 	width: 42%;
 }

 /* clearfix */
 .clearfix:after {
 	content: ".";
 	display: block;
 	clear: both;
 	visibility: hidden;
 	line-height: 0;
 	height: 0;
 }
 .clearfix {
 	display: inline-block;
 }
 html[xmlns] .clearfix {
 	display: block;
 }
 * html .clearfix {
 	height: 1%;
 }

 </style>
 </head>
 <body>
 <div class="wrap">
 	<header>
 		<h1>Layout: <small>Fluid - Fixed Test</small></h1>
 	</header>
 	<div class="container clearfix">
 		<div class="fluid">
 			<div class="fluid-fixer">
 				<img src="http://placehold.it/2000x110" class="banner" />
 				<h2>I'm the main column</h2>
 				<p>I should be fluid width and never pushing my sidebar down.</p>
 				<div class="lists clearfix">
 					<div>
 						<strong>I Should</strong>
 						<ul>
 							<li>Clear floats within me</li>
 							<li>Have fluid width</li>
 						</ul>
 					</div>
 					<div>
 						<strong>I Should NOT</strong>
 						<ul>
 							<li>Break my sidebar</li>
 							<li>Force the content wider than the browser</li>
 						</ul>
 					</div>
 				</div>
 			</div>
 		</div>
 		<div class="fixed">
 			<img src="http://placehold.it/220x110" />
 			<h2>Hey There</h2>
 			<p>I'm the fixed-width sidebar. 220px wide.</p>
 		</div>
 	</div>
 	<footer>
 		<p>Footer here - I should clear anything above, regardless of what's taller.</p>
 	</footer>
 </div>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Layouts: Fluid > Fixed</title>
	<style type="text/css">
	html {
	margin: 0;
	padding: 0;
	}
	body {
	color: #555;
	font-family: Helvetica, Arial, Sans-serif;
	font-size: 14px;
	font-weight: lighter;
	line-height: 1.6em;
	margin: 0;
	padding: 0 20px;
	}
	h1, h2 {
	color: #333;
	font-weight: bold;
	}
	small {
	color: #ccc;
	}
	strong {
	font-weight: bold;
	}
	img {
	height: auto;
	max-width: 100%;
	}
	ul {
	padding-left: 20px;
	}

	header,
	footer {
	background-color: #333;
	color: #fff;
	margin-left: -20px;
	margin-right: -20px;
	position: relative;
	}
	header {
	margin-bottom: 30px;
	padding: 30px 20px;
	}
	header h1 {
	color: #fff;
	margin: 0;
	padding: 0;
	}
	footer {
	margin-top: 30px;
	padding: 8px 20px;
	}
	.banner {
	height: 110px;
	}
	.container {
	width: 100%;
	}
	.fluid {
	float: left;
	width: 100%;
	}
	.fluid-fixer {
	margin-right: 240px;
	}
	.fixed {
	float: left;
	margin-left: -220px;
	width: 220px;
	}
	.lists > div {
	float: left;
	margin: 0 0 18px 3%;
	padding: 0;
	width: 42%;
	}

	/* clearfix */
	.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
	}
	.clearfix {
	display: inline-block;
	}
	html[xmlns] .clearfix {
	display: block;
	}
	* html .clearfix {
	height: 1%;
	}

	</style>
	</head>
	<body>
	<div class="wrap">
	<header>
	<h1>Layout: <small>Fluid - Fixed Test</small></h1>
	</header>
	<div class="container clearfix">
	<div class="fluid">
	<div class="fluid-fixer">
	<img src="http://placehold.it/2000x110" class="banner" />
	<h2>I'm the main column</h2>
	<p>I should be fluid width and never pushing my sidebar down.</p>
	<div class="lists clearfix">
	<div>
	<strong>I Should</strong>
	<ul>
	<li>Clear floats within me</li>
	<li>Have fluid width</li>
	</ul>
	</div>
	<div>
	<strong>I Should NOT</strong>
	<ul>
	<li>Break my sidebar</li>
	<li>Force the content wider than the browser</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	<div class="fixed">
	<img src="http://placehold.it/220x110" />
	<h2>Hey There</h2>
	<p>I'm the fixed-width sidebar. 220px wide.</p>
	</div>
	</div>
	<footer>
	<p>Footer here - I should clear anything above, regardless of what's taller.</p>
	</footer>
	</div>
	</body>
	</html>