Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set sibling DIV the equal height (tallest)

Tags:

jquery

I'm trying to set paired divs the same height.

<div class="item ">
Some text
</div>
<div class="item right">
Some text
</div>
<div class="item ">
Some text<br/>Some text<br/>Some text<br/>Some text<br/>Some text
</div>
<div class="item right">
Some text<br/>Some text<br/>Some text<br/>Some text
</div>
<div class="item ">
Some text
</div>
<div class="item right">
Some text<br/>Some text<br/>Some text
</div>

css

.item{width: 45%;float: left;position: relative;border: 1px solid #000;clear:left;}
.item.right{float:right;clear:right;}

jQuery I'm using

$('.item.right').prev().each(function() {
    leftheight = $(this).height();
    rightheight = $(this).next().height();      
    if(leftheight > rightheight){
        $(this).next().height(leftheight);
    }else{
        $(this).height(rightheight);
    }               
});

This doesn't seem to work and I can't figure out why.

I have two column layout where the divs have a pin line border, so it is very obvious when they are not the same height. the 'right class' float the item to the right. I only want the pairs the same heights as they will form a row. I don't want to use tables (css or otherwise) as the layout is dynamic for mobile (where they form a single column).

like image 560
Elijha Avatar asked Oct 17 '13 10:10

Elijha


People also ask

How do you make a DIV the same height as another?

Place both DIVs into a container DIV that's set to 100% of page height and set both interior DIVS to 100%. They will fill up the container DIV and the height of both will be equal.

How do I keep two side by side DIV elements the same height?

The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.

What determines height of div?

The width of the div is by default 100% (due to display:block css) and the height vary according to the inner content. Also, the width will always remain 100% even if inner content has higher width.

What is height inherit CSS?

What is CSS inherit ? When you set inherit on a CSS property, the property takes the value from the element's parent. This applies not only to inheritable properties, but to all CSS properties. The div1 has a height set to 100px and a color set to red .


1 Answers

You can use map() to get the heights of the div left/right elements in to an array, then Math.max on the array to get the tallest, and use that value for both of them. Try this:

$('.item.right').each(function() {
    var $divs = $(this).add($(this).prev('.item'));
    var tallestHeight = $divs.map(function(i, el) {
        return $(el).height();
    }).get();
    $divs.height(Math.max.apply(this, tallestHeight));
});

Example fiddle

like image 150
Rory McCrossan Avatar answered Sep 27 '22 22:09

Rory McCrossan