CODEWITHSUNDEEP
htmlcss
Bin Chen
Bin Chen

Reputation: 63299

Div largest height

I have 3 divs

<div id="div1" style="float:left;">
</div>

<div id="div2" style="float:left;">
</div>

<div id="div3" style="float:left;">
</div>

In most of time div3 is the highest, I want div1 and div2 to have the same height as div3, is it possible to do?

Upvotes: 0

Views: 126

Answers (1)

alex
alex

Reputation: 490163

You can use faux background or the holy grail technique.

Alternatively, you could use a dash of JavaScript...

var divIds = ['div1', 'div2', 'div3'],
    divs = [],
    divsLength = divIds.length,
    maxHeight = 0;

for (var i = 0; i < divsLength; i++) {
   var div = document.getElementById(divIds[i]);
   maxHeight = Math.max(maxHeight, div.offsetHeight);
   divs.push(div);
}

for (var i = 0; i < divsLength; i++) {
   divs[i].style.height = maxHeight + 'px';
}

jsFiddle.

Upvotes: 4

Related Questions