2.5 Faux Columns

Perhaps the oldest trick around for equal height columns, the faux (false) columns technique involves attaching a vertically tiled background image to a container div that contains the column divs. This image can have regions of differing colours that will correspond to the 3 columns, and only needs to be a pixel or so deep, like in the example below:

background.gif

This is then applied to the background of the container div and repeated (tiled) using the repeat-y; value. So in the styesheet:

html, body	{height:100%;}

body		{text-align: center;}

#wrap		{margin: 0 auto;
		width: 900px;
		height:100%;}

#header 	{width: 900px;
		height: 100px;
		background-color:#666633;}

#container	{display: inline;
		float: left;
		background: url("images/background.gif")
		repeat-y;
		min-height: 100%;
		_height: 100%;}

#content	{display: inline;
		float: left;
		width: 600px;
		margin-left: 150px;
		background: white;}

#leftbox	{display: inline;
		float: left;
		width: 150px;
		margin-left: -900px;}

#rightbox	{display: inline;
		float: left;
		width: 150px;}

#footer 	{clear: both;
		background-color:#666633;}

And the html is just like before except for the addition of an extra div to contain the columns:

<body>
 <div id="wrap">
   <div id="header">
   </div>
   <div id="container"> /* Extra markup */
   </div>
   <div id="content">
   </div>
   <div id="rightbox">
   </div>
   <div id="leftbox">
   </div>
   </div>
   <div id="footer">
   </div>
 </div>
</body>

Together these would give the following effect.