How to determine heights of div and set border on the div with the greater height?

I have two divs floated left so that they appear next to each other. They are both populated with dynamic content so that for some users the left div may have more items and height and for others the right div might be longer.

I want to put a border in between the two 开发者_开发知识库divs so that it is border-right on the left div if the left div is longer or border-left if the right div is longer.

My thought is to do this at run time so that the php code checks the # of items in each div first and then proceeds to add the appropriate in line style tags to the appropriate divs. It will probably work but I'm wondering if there's an easier way to do this through css?

What you can do is set the two divs to overlap by their border width, and set a border-right on the leftmost float, and a border-left and position: relative on the rightmost float. Then the line will appear to grow with the longest one, but in actuality it is 2 overlapping borders.

I set up two examples on jsfiddle so you can see them. But I am attaching the CSS here. I used horribly obvious colors just to make it clear what I am showing.

Links to JSfiddle complete code:

http://jsfiddle.net/8nU6K/1/

http://jsfiddle.net/8nU6K/2/

.container{
    overflow:hidden; 
    background-color:red; 
    width:350px;
}

.left, .right{
    padding: 3px;
    float: left;
    margin: 0;
    background-color:white;
    width: 150px;
}
.left{
    border-right:10px solid green;
}

.right {
    position:relative; 
    left:-10px; 
    border-left:10px solid blue;  
}

Don't try guess how big things will be on the server, that'll just lead to frustration and bugs. An easy client side solution is to do this:

• Put a left border on the right box and a right border on the left box.
• Make the borders the same width and color.
• Add a negative left margin on the right box that has the same width as the border.
• Use padding inside boxes to simulate spacing between them.

Demo HTML:

<div class="a">
    <ul>
        <li>Where</li>
        <li>Is</li>
        <li>Pancakes</li>
        <li>House</li>
    </ul>
</div>
<div class="b">
    <ul>
        <li>No</li>
        <li>One</li>
        <li>Uses</li>
        <li>The</li>
        <li>Two</li>
        <li>Cent</li>
        <li>Stamps</li>
    </ul>
</div>

<br style="clear: both;"><br>

<div class="a">
    <ul>
        <li>No</li>
        <li>One</li>
        <li>Uses</li>
        <li>The</li>
        <li>Two</li>
        <li>Cent</li>
        <li>Stamps</li>
    </ul>
</div>
<div class="b">
    <ul>
        <li>Where</li>
        <li>Is</li>
        <li>Pancakes</li>
        <li>House</li>
    </ul>
</div>

And some CSS (the border colors are just for illustration):

.a {
    float: left;
    border-right: 1px solid red;
    padding-right: 10px;
}

.b {
    float: left;
    border-left: 1px solid green;
    padding-left: 10px;
    margin-left: -1px;
}

And a live example: http://jsfiddle.net/ambiguous/X8J5p/