Question

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?

Answer 1

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;  
}