"Matching" Columns

**SusanTWDL** · Sep 10, 2007 09:59

Hello,

I was wondering if anyone could help me figure out how to achieve this effect. First, the site I'm working on is ju li edawn dot net (please remove spaces). For example, click on "Writing" (which is the actual blog -- this whole site is using Wordpress). Looking at the bottoms of the columns, I want them to be even all the way across. I tried to accomplish this using this matching columns script. But it's not working. I'm wondering if it's because these boxes are absolutely positioned. I have the problem on every page of the site.

Do you know of another way to make them match? I thought of using an image, but I honestly don't know how to do it that way. I'll appreciate any ideas.

**rhlowe** · Sep 10, 2007 15:50

When I need two or more columns to be of equal length, I usually use the faux columns technique. I could go into a long description of what that is, but A List Apart already has and did it better than I could.

Furthermore, for a multi column layout, I wouldn't suggest you use absolute positioning, you can get the same effect by floating the two columns within their parent element.

**Dan Schulz** · Sep 10, 2007 16:40

Here you go. A good friend of mine wrote it, and I'm going to talk him into including it in one of my sites as a full blown article once the site goes live (go to my signature and look for the bottom middle link if you want to know which site I'm talking -- note: this is worded as of 10 September 2007 and will not be applicable when the site launches).

http://battletech.hopto.org/html_tut.../template.html

**markbrown4** · Sep 10, 2007 18:06

I agree with rhlowe, faux columns are the best / simplest method to use for equalising columns.

Dan, that's an interesting method to use - I don't find it terribly useful though.

Off Topic:

An element with no texture is as plain as a rice patty - With images you can get your spicy beef patties.

**Dan Schulz** · Sep 10, 2007 18:38

I'm not saying you can't use background images, just that you will still the appearance of equal height columns doing what Jason advised if you don't (or if someone turns off the images in their browser).

**SusanTWDL** · Sep 10, 2007 19:02

Thanks for your input, everyone!

Would the faux column technique work on my layout since the columns that need to be even don't have the same top margin? The right sidebar on my design is actually broken up into smaller boxes that all have different colors. I'm not sure how to apply this.

**Dan Schulz** · Sep 10, 2007 19:06

It can, it just depends on what color you want the base column background to be (to clearly identify it and separate it from the main content).

**SusanTWDL** · Sep 10, 2007 19:10

Okay, I will have to experiment with this. I'll be in touch! Thanks!!

**all4nerds** · Sep 11, 2007 09:52

Hello

Something completely new ?

Equal high (1) 2 3 columns, left center, right center, any width, with borders

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>equal columns</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	
	html,body{height:100&#37;;}
	
	p,h1,h2{padding:5px;font-size:1em;}
	
	body{
	background:#a2a2a2;
	text-align:center;
	font-size:75%;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	
	div{text-align:left;}

	.w{margin:0px auto;}
	.wx{width:64em;}
	.wx{width:80%;}
	
	.wra,.au,.he,.na,.l,.ll{position:relative;}
	
	.wra{
	background:#d8d8d8;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	margin-top:-3.2em;
	}
	head+body .wra{min-height:100%;background:#c6c6c6;}
	
	.he{
	background:#ff8c00;
	/*z-index:2;*/
	height:7em;
	border-top:3.25em solid #000000;
	}
	
	.fo,.na{
	background:#fbfbfb;
	height:3em;
	}
	.fo{border:1px solid #000000;}
	
	.na,.he{
	margin:0 -16.1em;
	border-bottom:1px solid #000000;
	}

	.au{
	margin-right:16em;
	background:#b4b4b4;
	border-right:1px solid #000000;
	z-index:2;
	}

	.aub{
	background:#c6c6c6;
	margin-left:16em;
	border-left:1px solid #000000;
	/*z-index:2;*/
	}
	
	.q{
	width:100%;
	float:left;
	margin:0 -1px;
	}
	
	.l,.ll,.la,.lla{width:16em;}
	.l,.ll{/*z-index:2;*/}
	.l{
	margin-left:-16em;
	left:-1px;
	float:left;
	}
	.ll{
	margin-right:-16em;
	left:1px;
	float:right;
	}
	
	.la,.lla{position:absolute;top:0;z-index:1;bottom:0;}
	.la{
	left:0;
	background:#b4b4b4;
	border-right:1px solid #000000;
	}
	.lla{
	right:0;
	background:#d8d8d8;
	border-left:1px solid #000000;
	}
	
	head+/* */body .fc:after{ /* min-height browser but not IE 7 */
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	}
	/* hide left col
	.l,.la{display:none;}.aub{margin-left:0;border-left:none;}.he,.na{margin-left:0;}
	 */
	/* hide right col
	.ll,.lla{display:none;}.au{margin-right:0;border-right:none;}.he,.na{margin-right:0;}
	 */
	</style>
	<!--[if IE]>
	<style type="text/css">
	* html .wra,* html body .au, * html body .aub, * html body .la, * html body .lla{height:100%;}
	* html .fc,* html p{height:1%;} /* IE 5 5.5 6 haslayout */
	*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
	</style>
	<![endif]-->
</head>
<body>
<div class="wra w">

<div class="au">
<div class="aub fc">

<div class="he"><h1>header</h1></div>

<div class="na"><p>nav</p></div>

<div class="l">
<p>L Start Start Start <br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="ll">
<p>R Start Start Start <br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="q">
<h2>content</h2>
<p>C Start Start Start <br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

</div>
</div>

<div class="la"></div>
<div class="lla"></div>

</div>

<div class="fo w"><p>footer</p></div>

</body>
</html>

**SusanTWDL** · Sep 11, 2007 10:27

It's new to me.

I applied the faux column technique last evening to another site I'm working on and it worked perfectly!! Now I just need to figure out this site. What's really throwing me off is the fact that these boxes don't have equal top margins. I just don't get how to do it. I will keep trying though!!

**markbrown4** · Sep 11, 2007 16:25

Hi Susan,

If you have a wrapper element, an all containing div - You can just add the background image to there.

If you have 2 wrapper elements then you can apply two background images to the same space.

Code:

<div class="outer">
  <div class="inner">
  </div>
</div>

Code:

.outer {
  /* This element can contain the left column's background image */
  background: #FFF url(left_bg.gif) repeat-y 0 0;
}
.inner {
  /* This element can contain the right column's background image */
  background: transparent url(right_bg.gif) repeat-y 100&#37; 0;
}

Because the inner wrapper has a transparent background you can see the other background from the outer underneath.

If you can't manage to get it working - please post you code or a link to your site and well take a look in.

Hope it helps

**all4nerds** · Sep 12, 2007 01:00

Hello

equal height 100% high by:

faux columns easy to use and understand needs image(s)

borders + negative margins for background column colors only

eXtended easy to implement, has a few limitations , but can be pushed to free standing borders

position relative with position absolutes , content box must be higher, columns are real colums, IE < 7 is still usable

position relative model, with a position absolute model under it

All models need solid understanding how negative margins and position relative absolute work, some can be made very clean with minimum markup, others need additional markup, you can also use more then one way on the same page

**all4nerds** · Sep 14, 2007 04:16

Hello

Matching columns, equal height columns, L C R or C R or L C

make the columns , Yes its that easy

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>equal columns</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	
	p,h1,h2{padding:5px;font-size:1em;}
	
	body{
	background:#a2a2a2;
	text-align:center;
	font-size:75&#37;;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	
	div{text-align:left;}

	.w{margin:0px auto;}
	.wx{width:64em;}
	.wx{width:80%;}
	
	.ar{margin-right:16em;}
	.al{margin-left:16em;}
	
	.wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
	.ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	.al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	
	h2{clear:both;}

	</style>
</head>
<body>

<div class="wra w">

<div class="ar">
<div class="al">
<h2>content</h2>
<p>C Start Start Start<br /><br /><br /><br /><br /><br /><br /><br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>
</div>


</div>

</body>
</html>

Connect the Left Right Column to the Content box, Ohe we have a clearing and 3 pixel jog problem

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>equal columns</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	
	p,h1,h2{padding:5px;font-size:1em;}
	
	body{
	background:#a2a2a2;
	text-align:center;
	font-size:75%;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	
	div{text-align:left;}

	.w{margin:0px auto;}
	.wx{width:64em;}
	.wx{width:80%;}
	
	.ar{margin-right:16em;}
	.al{margin-left:16em;}
	
	.l,.ll{width:16em;}
	.l{margin-left:-15.9em;float:left;left:-.1em;}
	.ll{margin-right:-15.9em;float:right;left:.1em;}
	
	h2{clear:both;}
	
	.wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
	.ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	.al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}

	</style>
	<!--[if IE]>
	<style type="text/css">
	* html .wra,* html .ar, * html .al{height:1%;} /* IE 5 5.5 6 haslayout */
	* html .l,* html .ll{position:relative;}

	</style>
	<![endif]-->
</head>
<body>

<div class="wra w">

<div class="ar">
<div class="al">

<div class="l">
<p>L Start Start Start<br /><br /><br /><br /><br /><br /><br /><br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="ll">
<p>R Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<h2>content</h2>
<p>C Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>
</div>


</div>

</body>
</html>

Make the Content box always fit, Oh an other Clear problem

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>equal columns</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	
	p,h1,h2{padding:5px;font-size:1em;}
	
	body{
	background:#a2a2a2;
	text-align:center;
	font-size:75%;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	
	div{text-align:left;}

	.w{margin:0px auto;}
	.wx{width:64em;}
	.wx{width:80%;}
	
	.ar{margin-right:16em;}
	.al{margin-left:16em;}
	
	.l,.ll{width:16em;}
	.l{margin-left:-15.9em;float:left;left:-.1em;}
	.ll{margin-right:-15.9em;float:right;left:.1em;}
	
	h2{clear:both;}
	
	.wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
	.ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	.al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	
	head+body .q{overflow:auto;}
	* html .q{float:left;}
	* html .q h2{height:1%;}

	</style>
	<!--[if IE]>
	<style type="text/css">

	* html .wra,* html .ar, * html .al{height:1%;} /* IE 5 5.5 6 haslayout */
	* html .l,* html .ll{position:relative;}

	</style>
	<![endif]-->
	
</head>
<body>

<div class="wra w">

<div class="ar">
<div class="al">

<div class="l">
<p>L Start Start Start<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="ll">
<p>R Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="q">
<h2>content</h2>
<p>C Start Start Start<br /><br /><br /><br /><br /><br /><br /><br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

</div>
</div>

</div>

</body>
</html>

Solid Clearing , ready to kick the columns to 100% height

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>equal columns</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	
	p,h1,h2{padding:5px;font-size:1em;}
	
	body{
	background:#a2a2a2;
	text-align:center;
	font-size:75%;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	
	div{text-align:left;}

	.w{margin:0px auto;}
	.wx{width:64em;}
	.wx{width:80%;}
	
	.ar{margin-right:16em;}
	.al{margin-left:16em;}
	
	.l,.ll{width:16em;}
	.l{margin-left:-15.9em;float:left;left:-.1em;}
	.ll{margin-right:-15.9em;float:right;left:.1em;}
	
	h2{clear:both;}
	
	.wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
	.ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	.al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	
	head+body .q{overflow:auto;}
	* html .q{float:left;}
	* html .q h2{height:1%;}

	head+/* */body .fc:after{ /* min-height browser but not IE 7 */
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	}

	</style>
	<!--[if IE]>
	<style type="text/css">
	
	* html .fc{height:1%;} /* IE 5 5.5 6 haslayout */
	*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */

	* html .wra,* html .ar, * html .al{height:1%;} /* IE 5 5.5 6 haslayout */
	* html .l,* html .ll{position:relative;}

	</style>
	<![endif]-->
	
</head>
<body>

<div class="wra w">

<div class="ar">
<div class="al fc">

<div class="l">
<p>L Start Start Start<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="ll">
<p>R Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="q">
<h2>content</h2>
<p>C Start Start Start<br /><br /><br /><br /><br /><br /><br /><br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

</div>
</div>

</div>

</body>
</html>

IE the old one's 5 5.5 6 , very very easy , just 3 X a 100% height

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>equal columns</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	
	html,body{height:100%;}
	
	p,h1,h2{padding:5px;font-size:1em;}
	
	body{
	background:#a2a2a2;
	text-align:center;
	font-size:75%;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	
	div{text-align:left;}

	.w{margin:0px auto;}
	.wx{width:64em;}
	.wx{width:80%;}
	
	.ar{margin-right:16em;}
	.al{margin-left:16em;}
	
	.l,.ll{width:16em;}
	.l{margin-left:-15.9em;float:left;left:-.1em;}
	.ll{margin-right:-15.9em;float:right;left:.1em;}
	
	h2{clear:both;}
	
	.wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
	.ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	.al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	
	head+body .q{overflow:auto;}
	* html .q{float:left;}
	* html .q h2{height:1%;}

	head+/* */body .fc:after{ /* min-height browser but not IE 7 */
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	}

	</style>
	<!--[if IE]>
	<style type="text/css">
	* html .wra,* html body .al, * html body .ar{height:100%;}
	*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */

	* html .l,* html .ll{position:relative;}

	</style>
	<![endif]-->
	
</head>
<body>

<div class="wra w">

<div class="ar">
<div class="al fc">

<div class="l">
<p>L Start Start Start<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="ll">
<p>R Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="q">
<h2>content</h2>
<p>C Start Start Start<br /><br /><br /><br /><br /><br /><br /><br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

</div>
</div>

</div>

</body>
</html>

Now IE7 and the Hobby Browsers, position absolutes hooked to the wrapper, and a little play with background colors

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>equal columns</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	
	html,body{height:100%;}
	
	p,h1,h2{padding:5px;font-size:1em;}
	
	body{
	background:#a2a2a2;
	text-align:center;
	font-size:75%;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	
	div{text-align:left;}

	.w{margin:0px auto;}
	.wx{width:64em;}
	.wx{width:80%;}
	
	
	head+body .wra{min-height:100%;position:relative;overflow:hi dden;}
	
	.ar{margin-right:16em;z-index:1;position:relative;}
	.al{margin-left:16em;}
	
	.l,.ll,.la,.lla{width:16em;}
	.l{margin-left:-15.9em;float:left;left:-.1em;}
	.ll{margin-right:-15.9em;float:right;left:.1em;}
	
	h2{clear:both;}
	
	head+body .q{overflow:auto;}
	* html .q{float:left;}
	* html .q h2{height:1%;}

	head+/* */body .fc:after{ /* min-height browser but not IE 7 */
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	}

	head+body .la,head+body .lla{position:absolute;top:0;bottom:0;}
	head+body .la{left:0;}
	head+body .lla{right:0;}
	
	head+body .wra{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) 16em 100% no-repeat;}
	head+body .la{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	head+body .lla{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	
	</style>
	<!--[if IE]>
	<style type="text/css">

	</style>
	<![endif]-->
	
</head>
<body>

<div class="wra fc w">

<div class="ar fc">
<div class="al fc">

<div class="l">
<p>L Start Start Start<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="ll">
<p>R Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="q">
<h2>content</h2>
<p>C Start Start Start<br /><br /><br /><br /><br /><br /><br /><br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

</div>
</div>

<span class="la">&nbsp;</span>
<span class="lla">&nbsp;</span>

</div>

</body>
</html>

Now together

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>equal columns</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	
	html,body{height:100%;}
	
	p,h1,h2{padding:5px;font-size:1em;}
	
	body{
	background:#a2a2a2;
	text-align:center;
	font-size:75%;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	
	div{text-align:left;}

	.w{margin:0px auto;}
	.wx{width:64em;}
	.wx{width:80%;}
	
	head+body .wra{min-height:100%;position:relative;}
	
	.ar{margin-right:16em;z-index:1;position:relative;}
	.al{margin-left:16em;}
	
	.l,.ll,.la,.lla{width:16em;}
	.l{margin-left:-15.9em;float:left;left:-.1em;}
	.ll{margin-right:-15.9em;float:right;left:.1em;}
	
	h2{clear:both;}
	
	head+body .q{overflow:auto;}

	head+/* */body .fc:after{ /* min-height browser but not IE 7 */
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	}

	head+body .la,head+body .lla{position:absolute;top:0;bottom:0;}
	head+body .la{left:0;}
	head+body .lla{right:0;}
	
	head+body .wra{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) 16em 100% no-repeat;}
	head+body .la{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	head+body .lla{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	
	</style>
	<!--[if IE]>
	<style type="text/css">
	* html .wra,* html body .al, * html body .ar{height:100%;}
	*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */

	* html .l,* html .ll{position:relative;}
	* html .la,* html .lla{display:none;}
	
	* html .q{float:left;}
	* html .q h2{height:1%;}
	
	* html .wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
	* html .ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	* html .al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}

	</style>
	<![endif]-->

	
</head>
<body>

<div class="wra fc w">

<div class="ar fc">
<div class="al fc">

<div class="l">
<p>L Start Start Start<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="ll">
<p>R Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="q">
<h2>content</h2>
<p>C Start Start Start<br /><br /><br /><br /><br /><br /><br /><br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

</div>
</div>

<span class="la">&nbsp;</span>
<span class="lla">&nbsp;</span>

</div>


</body>
</html>

You can ad borders easy ?, positioning the content is a bit odd

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>equal columns</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	
	html,body{height:100%;}
	
	p,h1,h2{padding:0px;font-size:1em;}
	
	body{
	background:#a2a2a2;
	text-align:center;
	font-size:75%;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	
	div{text-align:left;}

	.w{margin:0px auto;}
	.wx{width:64em;}
	.wx{width:80%;}
	
	.wra,.he,.na,* html .ar,.la,* html .al,.lla,.fo{border-color:#0000ff;border-style:solid;}
	.wra,.ar,.he,.na,.l,.ll{position:relative;}
	
	.wra{
	background:#d8d8d8;
	border-width:0 1em;
	margin-top:-5em;
	}
	head+body .wra{min-height:100%;background:#c6c6c6;}
	
	.ar{margin-right:16em;z-index:1;}
	.al{margin-left:16em;/* z-index:2;*/}
	
	.he{
	background:#ff8c00;
	height:7em;
	border-width:6em 0 1em 0;
	}
	
	.l,.ll,.la,.lla{width:16em;}
	.l{margin-left:-15.9em;float:left;left:-.1em;/*  */}
	.ll{margin-right:-15.9em;float:right;left:.1em;/*  */}
	
	head+body .la,head+body .lla{position:absolute;top:0;bottom:0;}
	head+body .la{left:0;background:#b4b4b4;border-width:0 1em 0 0;}
	head+body .lla{right:0;background:#d8d8d8;border-width:0 0 0 1em;}
	
	.l,.ll,.q{/* text-align:right; */}
	head+body .q{overflow:hidden;padding:0 1em;}

	.fo,.na{background:#fbfbfb;height:3em;}
	
	.fo{border-width:1em;}
	
	.he,.na{margin:0 -16em;}

	.na{border-width:0 0 1em 0;}
	
	head+/* */body .fc:after{ 
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	}
	
	h2{clear:both;}
	/*  */
	html body .la,* html body .ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	html body .lla,* html body .wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
	head+body .wra{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) 16em 100% no-repeat;}
	* html body .al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
	
	/* hide left col
	.l,.la{display:none;}html .al{margin-left:0;border-left:none;}html body .he,html body .na{margin-left:0;}head+body .q{overflow:auto;padding:0 1em 0 0;}
	 */
	/* hide right col
	.ll,.lla{display:none;}html .ar{margin-right:0;border-right:none;}html body .he,html body .na{margin-right:0;}head+body .q{overflow:auto;padding:0 0 0 1em;}
	 */
	</style>
	<!--[if IE]>
	<style type="text/css">
	* html .wra,* html body .al, * html body .ar{height:100%;}
	
	* html .ar{border-width:0 1em 0 0;background:#b4b4b4;}
	* html .al{border-width:0 0 0 1em;background:#c6c6c6;}
	
	* html .he,* html .na{margin:0 -17em;/*  */}
	
	* html .l{left:-1.1em;/*  */}
	* html .ll{left:1.1em;/*  */}
	
	* html .la,* html .lla{display:none;}
	
	* html .q{float:left;}
	* html .q h2{height:1%;}
	
	* html .fc,* html p{height:1%;} /* IE 5 5.5 6 haslayout */
	*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
	* html .la,* html .lla{display:none;}
	</style>
	<![endif]-->
</head>
<body>

<div class="wra w">

<div class="ar">
<div class="al fc">

<div class="he"><h1>header</h1></div>

<div class="na"><p>nav</p></div>

<div class="l">
<p>L Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="ll">
<p>R Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="q">
<h2>content</h2>
<p>C Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

</div>
</div>

<span class="la"></span>
<span class="lla"></span>

</div>

<div class="fo w"><p>footer</p></div>

</body>
</html>

full demo

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>equal columns</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	
	html,body{height:100%;}
	
	p,h1,h2{padding:0px;font-size:1em;}
	
	body{
	background:#a2a2a2;
	text-align:center;
	font-size:75%;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	
	div{text-align:left;}

	.w{margin:0px auto;}
	.wx{width:64em;}
	.wx{width:80%;}
	
	.wra,.he,.na,* html .ar,.la,* html .al,.lla,.fo{border-color:#cc33cc;border-style:solid;}
	.wra,.ar,.he,.na,.l,.ll{position:relative;}
	
	.wra{
	background:#d8d8d8;
	border-width:0 .1em;
	margin-top:-3.2em;
	}
	head+body .wra{min-height:100%;background:#c6c6c6;}
	
	.ar{margin-right:16em;z-index:1;}
	.al{margin-left:16em;/* z-index:2;*/}
	
	.he{
	background:#ff8c00;
	height:7em;
	border-width:3.25em 0 .1em 0;
	}
	
	.l,.ll,.la,.lla{width:16em;}
	.l{margin-left:-15.9em;float:left;left:-.1em;/*  */}
	.ll{margin-right:-15.9em;float:right;left:.1em;/*  */}
	
	head+body .la,head+body .lla{position:absolute;top:0;bottom:0;}
	head+body .la{left:0;background:#b4b4b4;border-width:0 .1em 0 0;}
	head+body .lla{right:0;background:#d8d8d8;border-width:0 0 0 .1em;}
	
	.l,.ll,.q{/*  */text-align:right;}
	head+body .q{overflow:auto;padding:0 .1em;}

	.fo,.na{background:#fbfbfb;height:3em;}
	
	.fo{border-width:.1em;}
	
	.he,.na{margin:0 -16em;}

	.na{border-width:0 0 .1em 0;}
	
	head+/* */body .fc:after{ 
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	}
	
	h2{clear:both;}
	
	/* background images */
	html body .la,* html body .ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	html body .lla,* html body .wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
	head+body .wra{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) 16em 100% no-repeat;}
	* html body .al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
	
	/* hide left col 
	.l,.la{display:none;}html .al{margin-left:0;border-left:none;}html body .he,html body .na{margin-left:0;}head+body .q{overflow:auto;padding:0 .1em 0 0;}
	head+body .wra{background-position: 0 100%;}
	*/
	/* hide right col
	.ll,.lla{display:none;}html .ar{margin-right:0;border-right:none;}html body .he,html body .na{margin-right:0;}head+body .q{overflow:auto;padding:0 0 0 .1em;}
	 */
	</style>
	<!--[if IE]>
	<style type="text/css">
	* html .wra,* html body .al, * html body .ar{height:100%;}
	
	* html .ar{border-width:0 .1em 0 0;background:#b4b4b4;}
	* html .al{border-width:0 0 0 .1em;background:#c6c6c6;}
	
	* html .he,* html .na{margin:0 -16.1em;/*  */}
	
	* html .l{left:-.2em;/*  */}
	* html .ll{left:.2em;/*  */}
	
	* html .la,* html .lla{display:none;}
	
	* html .q{float:left;}
	* html .q h2{height:1%;}
	
	* html .fc,* html p{height:1%;} /* IE 5 5.5 6 haslayout */
	*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
	</style>
	<![endif]-->
</head>
<body>

<div class="wra w">

<div class="ar">
<div class="al fc">

<div class="he"><h1>header</h1></div>

<div class="na"><p>nav</p></div>

<div class="l">
<p>L Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="ll">
<p>R Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

<div class="q">
<h2>content</h2>
<p>C Start Start Start<br />
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
 -->
End</p>
</div>

</div>
</div>

<span class="la">&nbsp;</span>
<span class="lla">&nbsp;</span>

</div>

<div class="fo w"><p>footer</p></div>

</body>
</html>

User Tag List

Thread: "Matching" Columns

Thread Tools

Display

"Matching" Columns

Maybe try Faux Columns?

Bookmarks

Bookmarks

Posting Permissions