Add to Favorites

Cross browser work around for min and max height

Wouldn't it be great if all the capabilities of css were supported thoroughly across all modern web browsers? YES! it would be but unfortunately we live in a world where that cannot happen, call it politics, lazyness or outright stubbornness but it is a sad truth that we still have to code browser hacks or work arounds in order to get the desired effects acrosse all web browsers.

Min-height/max-height is one of these things that some browsers support and others do not. If you have a website that has a gradient as a background image and you are depending on a minimum height of a box in order for the background image to display, then you know what I am talking about.

Now for the trick that you can use to get the desired effect.
The trick is simple, create a div that has a height equal to the minimum height that you need the containing box to be. If you have a two column layout with floats and you need the containing box to be at least 500px, then add a third column that only has a non breaking space with a very small width and set the height to be 500px.

A simple trick can save you some headache in the long run.


Be the first to leave a comment on this post.

Leave a comment

To leave a comment, please log in / sign up