taeo/fluid_fixed.html

## 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>