Check height of sibling div with js?

JavaScript
1

So…

If I have this:

<div class="container">
<div class="first inner">ksjdkaskdksd content</div>
<div class="middle inner">just a line of content at the bottom</div>
<div class="last inner">ksjdkaskdksd content</div>
</div>

And want the middle div to have the same height as its first siblings (class “first”). How could I arhieve this using Javascript?

EDIT: the height of the divs are dynamic, as it is a responsive site.

2

Why not do it with CSS?

3

How can I do it with CSS? table-cell method?

4

Yes. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.container {display: table; table-layout: fixed; width: 50%; margin:0 auto;}
.container > div {display: table-cell; }
.middle {background: rgba(4,66,33,0.4);}

</style>
</head>
<body>

<div class="container">
<div class="first inner">ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content ksjdkaskdksd content </div>
<div class="middle inner">just a line of content at the bottom</div>
<div class="last inner">ksjdkaskdksd content</div>
</div>

</body>
</html>
5

Thanks, But how will this work on smaller devices when the three divs stack on top of each other?

6

You use @media queries to remove display: table on small screens and use display: block (or similar) instead.

7

Hmm it looks like I wont be able to use this method on this project, even tho the trick does work. Do you know how this could be done with JS? So that the div checks the height of his siblings and applies this to itself.

8

You know we’ve got to ask Why, right? :slight_smile:

9

=) Well, the container can have an “unlimited” number of a block with the width 25% and a dynamic height, so If you put 5-6 of these blocks in the container that would create two rows and the container would be twice as high. And then we have this odd block, who doesnt look like the rest, and only contains a background image and a small amount of text. It is this block that I want to inherit the height of it siblings (the block before or after). So wouldnt the table-cell option break if the container is filled with more blocks and more rows?

Hope you understand what i am trying to explain, my english isn’t always the best=)

10

I don’t understand, but I strongly suspect this is not a reason to rule out display: table and/or media queries.

11

Hmm i can’t get it work even with the table-cell method.

this is what i have basically:

<div class="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner match"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>

.wrapper{
display: table;
}

.inner{
display: table-cell;
width: 25%;
float: left;
}

.match{
height: 100%;
}

The div with class “match” is the only one who differs from the others regarding height of the content, but it should still have a background-image that stretches 100% height. It’s siblings sets the height, and is dynamic. So what I want is the “match” div to inherit the same height as the other divs. But I cannot get it to work.

12

You can’t float an element with display: table-cell, so remove the float. Cells are also 100% the height of the container by default. It also doesn’t make sense to have 8 cells and try to set each to width: 25%. Perhaps make it a bit clearer what you are trying to achieve here.

13

Hmm okey i see. Well it is not up to me how many divs with the width 25% that will be in the container, could be three, could be 43, they will be added via CMS. So my solution have to work regardless of how many items there is in the container. I guess maybe one could do some JS solution that creates a new container after 4 items or something?

14

So are you limited to 4 per row?

15

Yes, and below 767px it is 2 … and below 480px only 1.

16

Will there be a container around each 4, or not?

17

No, only if there is some good solution to adding a container to each row. But as it is now…no.

18

Do you need the divs to be visually the same height? By that I mean, will they have a background color or similar? If not, you can set them to display inline-block and give them a width that will create the right number per row. They will stay in an even row, but won’t be the same height.

Besides that, you need JS for this.

19

Hmm yeah all other div except the one with class “match” will be visually the same, regarding looks, height and content. Then we have this “match” -div that will only have a line of text at the bottom and a background-image that have to be the same height as the other divs.

I tried this little script now:

$(document).ready(function(){
	function equalHeights (element1, element2) {
		var height;

		if (element1.outerHeight() > element2.outerHeight())
		{
			height = element1.outerHeight();
			element2.css('height', height);
		}
		else {
			height = element2.outerHeight();
			element1.css('height', height);
		}
	}

	equalHeights($('.inner'), $('.match') )
});

And it seems to do something, but the “match” div just stretches to half the height of the other divs:S

20

Let’s pullo @Pullo; to check your JS.