<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Faux Column CSS Layouts - 2 Column - faux-9-2-col</title>
<style type="text/css">
*{padding:0;margin:0;}
body{font-family:Arial, Helvetica, sans-serif;font-size:13px;}
.clear{clear:both;background:none;}
/* layout */
#wrapper{margin:0 auto;width:922px;}
#faux{background:url(faux-1-2-col.gif);margin-bottom:10px;overflow:auto;width:100%}
#header{color:#333;width:902px;padding:10px;height:100px;margin:10px 0px 5px 0px;background:#D1DBDB;}
#navigation{color:#333;padding:10px;margin:0px 0px 5px 0px;background:#ABBEBE;}
#leftcolumn{display:inline;color:#333;margin:10px;padding:0px;width:195px;float:left;}
#rightcolumn{float:right;color:#333;margin:10px;padding:0px;width:683px;display:inline;position:relative;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">This is the Header</div><!--header end-->
<div id="navigation">This is the Navigation</div><!--navigation end-->
<div id="faux">
<div id="leftcolumn"></div><!--leftcolumn end-->
<div id="rightcolumn">
<a href="#">Download this CSS Layout</a>
<br /><br />
<h1>Faux Column CSS Layouts</h1>
<p>These 2 Column Faux CSS Layouts use a background image to make it look like the left and right columns are equal in height and independent of each other.<br /><br />Things couldn't be further from the truth. I created a parent column called faux and vertically tiled the image, that contained both the left and right child columns. I then vertically tiled the faux background image and viola. <br /><br />I first found about this method from the <a href="http://www.alistapart.com">alistapart site</a> by a guy called <a href="http://simplebits.com/">Dan Cederholm</a>
</p>
<div class="clear"></div>
</div><!--rightcolumn end-->
</div><!--faux end-->
</div><!--wrapper end-->
</body>
</html>