Min-Height

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. This solution has just one drawback and that is it will not work in browsers with JavaScript disabled.

2 thoughts on “Min-Height”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.