Border between two columns without height

Question

I have two columns, and I need to add a row between them. This is 1px solid color, so I would like to achieve this with css. The trick is that the content is dynamically loaded, so sometimes there may be more text in the left column, and sometimes there may be more text in the right column. Of course, if coulmn were always the same size, I would add a border to a larger one. But, unfortunately, I do not.

So, is there a way to achieve this or can I combine it with php and maybe strlen or something else?

Here you can find a simple code for this problem http://jsfiddle.net/M9TSs/

Answer 1

One way to do this is to have a border for both and use a negative 1px margin to pull the right column so that the borders overlap:

http://jsfiddle.net/7GCff/

Answer 2

I already solved this with jQuery ...

I used this code and it worked great.

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

Source: http://www.cssnewbie.com/equal-height-columns-with-jquery/

Makes all columns the same, longest.