SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. Sep 10, 2007, 08:59 #1
    SusanTWDL
    SusanTWDL is offline
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "Matching" Columns

    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.
    Susan
    Auxano Creative (formerly The WebDesign Loft)
  2. Sep 10, 2007, 14:50 #2
    rhlowe
    rhlowe is offline
    SitePoint Zealot rhlowe's Avatar
    Join Date
    Sep 2006
    Location
    San Diego
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Maybe try Faux Columns?

    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.
    Last edited by rhlowe; Sep 10, 2007 at 14:52. Reason: addition
    San Diego Freelance Web Development Contractor
    Great Taste, no Filler. Now with no Trans Fat!
  3. Sep 10, 2007, 15:40 #3
    Dan Schulz
    Dan Schulz is offline
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
    Dan Schulz - Design Team Advisor | Follow me on Twitter
    SitePoint References: HTML CSS JavaScript | Become A Guru
    WordPress SEO Checklist | What WordPress Plugins Do You Use?
    Web Standards Curriculum | Image Free Equal Height Columns
  4. Sep 10, 2007, 17:06 #4
    markbrown4
    markbrown4 is offline
    padawan silver trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,070
    Mentioned
    27 Post(s)
    Tagged
    0 Thread(s)
    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.
    --
    twitter | yellowshoe
  5. Sep 10, 2007, 17:38 #5
    Dan Schulz
    Dan Schulz is offline
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).
    Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
    Dan Schulz - Design Team Advisor | Follow me on Twitter
    SitePoint References: HTML CSS JavaScript | Become A Guru
    WordPress SEO Checklist | What WordPress Plugins Do You Use?
    Web Standards Curriculum | Image Free Equal Height Columns
  6. Sep 10, 2007, 18:02 #6
    SusanTWDL
    SusanTWDL is offline
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Susan
    Auxano Creative (formerly The WebDesign Loft)
  7. Sep 10, 2007, 18:06 #7
    Dan Schulz
    Dan Schulz is offline
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,468
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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).
    Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
    Dan Schulz - Design Team Advisor | Follow me on Twitter
    SitePoint References: HTML CSS JavaScript | Become A Guru
    WordPress SEO Checklist | What WordPress Plugins Do You Use?
    Web Standards Curriculum | Image Free Equal Height Columns
  8. Sep 10, 2007, 18:10 #8
    SusanTWDL
    SusanTWDL is offline
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I will have to experiment with this. I'll be in touch! Thanks!!
    Susan
    Auxano Creative (formerly The WebDesign Loft)
  9. Sep 11, 2007, 08:52 #9
    all4nerds
    all4nerds is offline
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by all4nerds; Sep 12, 2007 at 00:19.
  10. Sep 11, 2007, 09:27 #10
    SusanTWDL
    SusanTWDL is offline
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!
    Susan
    Auxano Creative (formerly The WebDesign Loft)
  11. Sep 11, 2007, 15:25 #11
    markbrown4
    markbrown4 is offline
    padawan silver trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,070
    Mentioned
    27 Post(s)
    Tagged
    0 Thread(s)
    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
    --
    twitter | yellowshoe
  12. Sep 12, 2007, 00:00 #12
    all4nerds
    all4nerds is offline
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    equal height 100&#37; 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
    Last edited by all4nerds; Sep 12, 2007 at 00:33.
  13. Sep 14, 2007, 03:16 #13
    all4nerds
    all4nerds is offline
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by all4nerds; Sep 14, 2007 at 08:24.

« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules