Question

I have two <div>s which look like this:

---------------------------
|           |             |
| DIV 1     |  DIV 2      |
|           |             |
---------------------------

The first div is floated left, while the second div is floated right. The left div has a right border, while the second div has a left border.
I would like the larger of these divs to extend its border all the way to the bottom of their container and I want only one border.

How could I achieve this?

Any help would be greatly appreciated.

Answer 1

Use jQuery

add this in head

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

and put this snippet in head or body.

<script type="text/javascript">
    $(document).ready(function() {
        var large=$(div).eq(0), small = $(div).eq(1), temp;
        if(large.height()<small.height()) {
            temp = large;
            large = small;
            small = temp;
        }
        large.css('border-right','1px solid black');
        small.css('border-left', '0px');
    });
</script>