How do I make these two divs the same height?

Question

I have some groups of content which consists of two divs, both divs contain text, and I want the second div of each set to match the height of the first.

DEMO

HTML (Cannot be changed unfortunately)

<!-- group one --> <div class="item"> .... content here </div> <div class="item_open"> .... content here too </div> <!-- group two --> <div class="item"> .... completely different content here </div> <div class="item_open"> .... some more content here too </div>

It's going to be responsive and any text in the second div will have overflow: scroll; on .... if I need to I will just run it on re-size. — Lighty_46
– Lighty_46, Commented Mar 4, 2014 at 14:48

Anton · Accepted Answer · 2014-03-04 14:46:37Z

6

Try this

$('.item_open').height(function(){ return $(this).prev().height(); });

DEMO

answered Mar 4, 2014 at 14:46

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lighty_46 Over a year ago

That's perfect thanks! I knew it would be a fairly simple solution, it's just figuring out how to use it. I was originally thinking of going down the route of .closest(), but figured it was better I ask here first.

Tushar Gupta - curioustushar · Accepted Answer · 2014-03-04 14:47:31Z

2

Fiddle Demo

$('.item_open').height(function(){ return $(this).prev().height(); });

.height()

.prev()

answered Mar 4, 2014 at 14:47

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Comments

Pierre Nortje · Accepted Answer · 2014-03-04 14:49:12Z

1

I'm pretty sure that what you are looking for could be found here: http://www.ejeliot.com/blog/61

(Using CSS and not JQuery)

answered Mar 4, 2014 at 14:49

Pierre Nortje

8363 gold badges10 silver badges29 bronze badges

1 Comment

Lighty_46 Over a year ago

I've used that method before and it's good but wouldn't work for what I'm doing. Thanks anyway!

BenM · Accepted Answer · 2014-03-04 14:49:45Z

Here is a fiddle using jQuery to achieve this.

http://jsfiddle.net/59Rhn/4/

$(".item_open").each(function(){ $(this).height($(this).prev().height()); });

SirDeveloper · Accepted Answer · 2014-03-04 14:49:06Z

If you cannot change HTML, you can try in this way..

var $item = $(document).find('.item'); // find first tag item var $itemNext = $item.next(); // return item_open $($item, $itemNext).css({ height: '100px' });

Collectives™ on Stack Overflow

How do I make these two divs the same height?

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Related