CODEWITHSUNDEEP
javascriptjquery
JainNavneet
JainNavneet

Reputation: 55

How to assign height of two dynamic div equal at run time

I have two div one is on left side and another is on right side and these are creating at run time the inner text of both. my problem is that how to make the both div height equal . i am using code

$('#div_Set_1_ChannelRoomContent').height($('#div_ChannelRoomName').height());

but it does'nt work

Upvotes: 3

Views: 1413

Answers (5)

Aidiakapi
Aidiakapi

Reputation: 6249

Why not do this?

var newHeight = Math.max($("#div1").height(), $("#div2").height());
$("#div1").height(newHeight);
$("#div2").height(newHeight);

If you're using floats, and the height doesn't have to be 'stretched' (with that I mean that the only thing that matters is that the next item is under both divs) you can just use the css property clear: both;.

Upvotes: 3

angio
angio

Reputation: 83

I am not sure how the rest of your code looks like but the line you wrote should work:

HTML:

<div id="div1">some text </div>
<div id="div2">some text...</div>

CSS:

#div1{
  height: 60px;    
  float: left;
}

JavaScript:

var height = $("#div1").height();       
$("#div2").height(height);

Upvotes: 0

piyer
piyer

Reputation: 746

You should add css style unless you want to set the height dynamically.

css

#set1, #set2{
   float: left;
   min-height: Xpx;
   height: Xpx;
}

Markup:

<div id="set1">Blah blah</div>
<div id="set2">blah blah</div>

It depends on your markup structure but you might want to clear the float and set width if needed.

Upvotes: 0

Nurlan
Nurlan

Reputation: 673

html:

<div id="main" style="width: 100%; height: 100px;">
    <div id="left" style="float: left; width: 49%; height: 100px; border: 1px solid red;"></div>
    <div id="right" style="float: left; width: 49%; height: 100px; border: 1px solid blue;"></div>
</div>

script:

$('div#left,#right').css("height", "220px");

using jquery you can dynamically change height

Upvotes: 0

zen.c
zen.c

Reputation: 688

Heard of the equalHeights plugin?

http://filamentgroup.com/lab/setting_equal_heights_with_jquery/

Upvotes: 0

Related Questions