Getting the larger of two divs floated side-by-side to exten

I have two 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 …

via HTML Language Development » Search Results » ajax:

Getting the larger of two divs floated side-by-side to exten

I have two

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
and put this snippet in head or body.

……………………………………..

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 :)

For more info: Getting the larger of two divs floated side-by-side to exten

HTML Language Development » Search Results » ajax

Getting the larger of two divs floated side-by-side to exten

Share this post:

Related Posts

Leave a Comment