<div id="wrap">
<div id="left">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="right">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
#left{
	float: left;
	margin: 0;
	padding: 0;
	width: 196px;
	font-size: .9em;
	height: auto;
}

#right{
	margin: 0 0 0 221px;
	padding: 0;
	height: auto;
}

#wrap{
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

The code above should generate a page with 2 columns. However, how can I make the left column as high as the right column (or vice versa) so I can insert a vertical separator line that goes from top to bottom between them?

#left{ float: left; margin: 0; padding: 0; width: 221px; font-size: .9em; height: auto; border-right:1px solid black; }
#right{ margin: 0 0 0 220px; padding: 0 0 0 10px; height: auto; border-left:1px solid black;}
#wrap{ width: 100%; margin: 0 auto; 	padding: 0; }

this works on my desktop.
left column has a border 1px on the right
right column has a border 1px on the left, on top of the left column border
so whichever is longest looks ok ?
look at width(left) and margin(right) for the two columns, added some padding to the right column to keep it away from the border
HTH

Not sure if you are using jquery at all but you could do it like this

$(document).ready(function() {
tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);

    equalHeight($("#left"));
    equalHeight($("#right"));
});

best if no javascript is used.

also i can only have 1 solid border, this way it looks nice, and both the left and right could be longer.

DIV height is determined by content length in non-absolute DIVs.

What this means is:

  • Only a DIV with "absolute" positioning can be forced to a specific height
  • DIVs with "absolute" positioning will always remain "locked" in place on the screen (no left/right float)
  • The only way to extend the height of a non-absolute (floating or sub) DIV is to extend the content within the DIV (or artificially extend the content if jrock's jquery concept works).

At least that's how I understand it :twisted: then again, I could be talkin' out my a**.

best if no javascript is used.

also i can only have 1 solid border, this way it looks nice, and both the left and right could be longer.

Alternately, you could place a 3rd (very narrow vertical) DIV between the other 2 with a solid line image of sorts within it but you'll still end up with the line only being as long as the image and not being "fit to scale" with the rest of your content. *shrug*

yeah i tried that but the height of that line div also has to be the same as either the #left or the #right.

Do you have a link to where the code is so we can see what it looks like now?

This is one workaround - Give your wrapper div a background image with a vertical line and position it so it will be between the two columns. Allow it to tile vertically. The longer column will determine the height of the wrapper div and therefore give you a vertical line.

So are you wanting a line the splits the left and right divs?