Min-Height
May 7th, 2006
Majority of the web page layout require side navigation column and the content column to expand vertically equal. This can be a challenge when we prefer to use div rather than tables for layout.
I explained one of the most useful hacks that create an appearance of two columnar div’s expanding vertically equal to each other. However, there are times when we actually want both the columns to have equal height. The solution can be min-height - a very helpful CSS property. However, it doesn’t work in IE. It works in FireFox.
I found a very useful hack for making min-height work in both IE and FireFox as explained here: http://www.greywyvern.com/code/min-height-hack.html. It works but it has one little problem. For each web page of a website we need to specify exact height in pixels. This proves to be too tedious for most ecommerce website. So, one of my colleagues, Aleksey Vaynshteyn wrote this JavaScript that calculates the current height of side navigation column and gives this height as the minimum height to the content column. It works very well as you can see how I implemented it for Bellini.com and LittleWeddingCompany.com. This solution has just one drawback and that is it will not work in browsers with JavaScript disabled.
May 8th, 2006 at 9:45 am
[…] Yes, as far as my knowledge goes we need to use background image for the main container div that holds the two columnar divs – div1 and div2. Or else, you can use min-height to make two columns stretch vertically equal. […]
May 8th, 2006 at 9:56 am
[…] Now, if you need these two columnar div’s to expand vertically equal to each other you can use the following method or use min-height. […]