I have two div element in my page aligned vertically. content of one div is fixed, but the content of other div varies so its height. i want to make both the div of same height. how can i do that??
+3
A:
The trick is to use the CSS properties display:table, display:table-row and display:table-cell to make containers (in this case div elements) behave like table cells.
MaxVT
2009-06-18 07:22:01
display:table* isn't supported by IE AFAIK. It's a nice idea but like most nice ideas, Microsoft is more than happy to spoil it.
Oli
2009-06-18 07:29:30
It's fully supported by IE8,but wasn't in IE7. So if you use this approach, your design won't work for IE7 users. I have gone around in circles 50 times with this key CSS/HTML limitation and short sighted design. And my final conclusion is to sadly not support IE7 (it's getting quite old now anyway and usage is slowly diminishing). The only way is to use messy JS to manually adjust the div height after the DOM is loaded. Apart from that, you have to use tables for your layout, which is a terrible thing to do. So I stick with display:table, which works perfectly on Firefox, IE8 and Chrome.
Aaron
2009-11-30 07:29:14
Aaron: I still have to support IE6, because that's what some clients have, and can not upgrade. We'll enter 2010 in a month, yes. *sigh*
MaxVT
2009-11-30 13:57:00
+2
A:
Well there are two ways:
Use CSS with a fake background
For this you'll need to make an image of your background containing both columns as you'd expect to see them. Display this on whatever holds the columns and now the columns will look the same height even if they are not.
You might need to add a new wrapping div to apply the background:
<div class="colwrap">
<div class="col">...</div>
<div class="col">...</div>
</div>
<div class="colwrap">
<div class="col">...</div>
<div class="col">...</div>
</div>
Or, use jQuery (or other) to fix the heights
This is slightly more manual but if you have other JS scripts firing off, this shouldn't be too tough.
if ($('col:1').height() > $('col:2').height())
$('col:2').height($('col:1').height());
else
$('col:1').height($('col:2').height());
or something like that would do it.
Oli
2009-06-18 07:27:08