Equalize div height

[keesvandieren]

Hi all,

Is it possible to equalize the heights of two diffs, which are beside each other?

I have two divs beside each other, called divLeft and divRight. Sometimes, divLeft contains more lines of content, and sometimes divRight contains more lines of content. However, I would like that, if divLeft has a bigger height, divRights' height is copied from divLeft and visa versa.

Is this possible with CSS, or can this only be achieved with DOM Javascript?

[KDLA]

Why don't you assign the two divs the same class for the measurement styles (the styles based on percentages of the screen, rather than content), then assign another class for the design styles. You can have more than one name in a class.
<div class="measure design">

KDLA

[Kor]

well, hm... I tried also to find a quite similar simple CSS method (I know how to do it with javascript, but it does not worth) regarding the max-height CSS attribute (which IE does not follow). By short the problem can be reduced at:

How can you persuade a div to take the dynamic gained length of it's parent? CSS crossbrowser solution. I'd like also to know the answer.

[KDLA]

Could you not develop a javascript which compares the two heights/widths, then changes, through assigning style attributes of each, to equalize them? The style change would override the previous CSS settings....

KDLA

[keesvandieren]

Why don't you assign the two divs the same class for the measurement styles (the styles based on percentages of the screen, rather than content), then assign another class for the design styles. You can have more than one name in a class.
<div class="measure design">

KDLA

Well, the height grows if there is more content. So I would like not to define the height explicit. For this website, I prefer to use the browserwindow scrollbar.

I've just searched on Google, and found a better description of the problem here (http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=70#7).

However, the solution on that page uses intrusive javascript. It also says that their is no CSS solution for this.

If this is true, I'll make a javascript solution myself which is non-intrusive (based on css classes).

[keesvandieren]

I think I'm going to create a Javascript solution.

The (x)html code can be:
<div id="column1" class="equalizeHeight columnSet1">
...
</div>

<div id="column2" class="equalizeHeight columnSet1">
...
</div>

<div id="column3" class="equalizeHeight columnSet2">
...
</div>

<div id="column4" class="equalizeHeight columnSet2">
...
</div>

How the javascript works:
- it will loop through all divs, if class equalizeHeight is found, it will be handled
- the second CSS class of the element, can be used to group columns; all columns will get the height, from the div in this group with the biggest height.

The Javascript will equalize height of (column1 and column2), and (column3 and column4).

Do you think this is a useful solution?

[KDLA]

Sounds good to me! Might be a pain if someone has the javascript turned off, but that's usually rare.

This might be a dumb question, but why are you wanting them equalized? Could not "faking" equal divs through a tiled background image which repeats based on the longest div in the group be another alternative? (the columns are floated on either side and the center is absolutely positioned)....

[Rossario123]

is this about max-height in i.e correct?

if so try this mabye.


/* for browsers that understand */
.MyClassSelector{
max-height: 60px;
}
/* for i.e 6 */
* html .MyClassSelector {
height:expression(
this.scrollHeight > 60? "60px" : "auto" );
overflow:hidden;
}

[keesvandieren]

I have made a first version of the javascript solution, it is available from here (http://javascript-toolkit.googlecode.com/svn/trunk/js/equalizeheight.js).

X library is obligatory, and is also checked in: click (http://javascript-toolkit.googlecode.com/svn/trunk/js/x.js)

An example of usage is in svn as well: click (http://javascript-toolkit.googlecode.com/svn/trunk/html/equalize-height-example.html)

[keesvandieren]

Sounds good to me! Might be a pain if someone has the javascript turned off, but that's usually rare.

This might be a dumb question, but why are you wanting them equalized? Could not "faking" equal divs through a tiled background image which repeats based on the longest div in the group be another alternative? (the columns are floated on either side and the center is absolutely positioned)....

Thanks for the tip, but using a background image which gives the left div the right background color, makes changing the layout with css not possible; a new background image needs to be created, when change on layout is needed.