Member Avatar for ultimatebuster 
<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 because: n/a
  • 5 Contributors
  • 10 Replies
  • 226 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jrock2004
Member Avatar for almostbob 
#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 because: n/a
Member Avatar for jrock2004

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"));
});
Member Avatar for ultimatebuster

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 because: n/a
Member Avatar for Lusiphur

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

Member Avatar for Lusiphur

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*

Member Avatar for ultimatebuster

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

Member Avatar for jrock2004

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

Member Avatar for Dandello

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 because: n/a
Member Avatar for jrock2004

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.