0
<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?

Edited by ultimatebuster: n/a

5
Contributors
10
Replies
11
Views
8 Years
Discussion Span
Last Post by jrock2004
0
#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

Edited by almostbob: n/a

0

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"));
});
0

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.

Edited by ultimatebuster: n/a

0

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**.

0

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*

0

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

0

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.

Edited by Dandello: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.