Best equal div height option?

Question

Ok so getting equal div heights is turning out to be quite a process. There appears to be a number of ways to do it. I would like to use CSS, and since I am pretty lousy at it, I was hoping someone could give me a hand.

Here is my basic layout. http://jsfiddle.net/SineMetu/nWXyu/1/

(Sorry for the massive background gradients in the css)

I would like all the divs to be the height of the tallest div. I need it to be able to change heights dynamically (fluidly) as the page is re-sized. So essentially all the divs on the page will adjust to the tallest div as it is re-sized.

What is the best way to do this?

possible duplicate of [CSS - Equal Height Columns?](http://stackoverflow.com/questions/2114757/css-equal-height-columns) — derekerdmann, Jun 13 '12 at 05:03
It's pretty likely that this question will get closed. There are a ton of questions that already cover this topic, please try and do a search before you ask something that has been answered already. Your question should be on your problem implementing one of the techniques that you have found on your own - and in answering your question, someone might give you a suggestion as to how to better write your code. — Wex, Jun 13 '12 at 05:50

Ola Tuvesson · Answer 1 · 2012-06-13T05:43:43.497

3

The ~~best~~ most elegant way to make equal height columns in modern* broswers is to set each one to display: table-cell;

<div id="page">
<div class="column one">one</div>
<div class="column two">two</div>
<div class="column three">three</div>
</div>

<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div#page {
display: table;
table-layout: fixed; /* this prevents column width from changing with content */
width: 100%;
height: 100%;
}
div.column {
display: table-cell;
width: 33%;
height: 100%;
}
div.one {
background-color: #CCC;
}
div.two {
background-color: #999;
}
div.three {
background-color: #666;
}
</style>

*) Basically, this works in all browsers except IE 6 and 7.

edited Jun 13 '12 at 05:43

answered Jun 13 '12 at 05:03

Ola Tuvesson

5,062
2
28
37

I'm sorry but using the word "best" for an approach that isn't cross compatible may not in fact be the "best". See the linked SO question: http://stackoverflow.com/questions/2114757/css-equal-height-columns – Jesse Jun 13 '12 at 05:37
1

Fair enough, how does "most elegant" grab you then? – Ola Tuvesson Jun 13 '12 at 05:44
Thanks, I managed to do it using matthew james taylor's method, which seems to be the best solution for fluid pages. – Joe Titterton Jun 13 '12 at 16:11

score 0 · Answer 2 · answered Jun 13 '12 at 06:15

0

I would use both css and html to achieve both equal heights on both div.

<div class="container">
    <div class="equal-height"></div>
    <div class="equal-height"></div>
</div>

.container { overflow: hidden; }
.equal-height { margin-bottom: -99999px; padding-bottom: 99999px !important; }

answered Jun 13 '12 at 06:15

Shawn Ang

538
7
21

This solution is broken in opera – Vladimir Starkov Jun 13 '12 at 06:17
It's... ugly. But I believe something like this method works in IE6/7 so the OP might want to include it in a conditional stylesheet, for IE6&7 only. Though the "!important" is pointless here. – Ola Tuvesson Jun 13 '12 at 06:53

score 0 · Answer 3 · answered Jun 13 '12 at 07:17

0

you can get your desired results with the use of css tables its simple to understand see the demo :- http://jsfiddle.net/nWXyu/5/

or you can read more about equal height columns :

http://css-tricks.com/examples/FluidEqualHeightFauxColumns/

answered Jun 13 '12 at 07:17

Shailender Arora

7,674
2
31
35

Best equal div height option?

3 Answers3