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.

---

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>

---

Do you mean that you want the larger div to be the full height of the container? If that's what you mean, you can specify the height to be 100% in the css for the larger div.

---

One way to achieve this effect is via absolute positioning. In this method, the width of your container is known (like 1024px for example) and you divide the available space between your two divs, 324px for the your div2 and 700px for div1. This way, you don't have to float divs. All you have to do is to define position: relative; for the container, and position: absolute; for two divs. Then you have to specify

top: 0;
right: 324px;
bottom: 0;
left: 0;

for your div1.

Another method is the floating that you've used here. By floating, you should float your both divs to the left or right, and specify width for each of them. Then you should not worry about the height of the width, because the div1 would be extended based on its contents.

---

if you mean that div one is higher then div 2 and you want them to be the same height then this is the script for you.

function setHeight(id1, id2){

   //haal de elementen op en plaats deze in een lokale variabel
   var elem1 = document.getElementById(id1);
   var elem2 = document.getElementById(id2);

   // controleer of de offsetHeight van element1 of 2 groter is
   // dan de ander en pas de kleinste aan
   if(elem1.offsetHeight>elem2.offsetHeight){
       elem2.style.height = elem1.offsetHeight+'px';
   }else{
       elem1.style.height = elem2.offsetHeight+'px';
   }


}

put this in a javascript file or in the head of your html inside de script tags ofcourse and put the following code inside your body tag

onload="setHeight(id1, id2)"

now you just need to give the div's you want to resize the id1 and 2(can be any name, as long as its is there in the parameters) and it works :)

good luck, and let me know if you have isues. i use this myself so it works :)