HowTo: Setting a Minimum Height to a Div or HTML element in ALL BROWSERS.

I always seem to forget this one. ReignWaterDesigns explanation is very useful:

First things first. Use the "min-height" in your css like this:
.myDiver{
     min-height:100px;
}






NEXT! Set the regular height to "auto" using the "!important" tag.
.myDiver{
     min-height:100px;
     height:auto !important;
}







LAST! Set the regular height (again) but to the minimum height. ;-)
.myDiver{
     min-height:100px;
     height:auto !important;
     height:100px;
}









This will keep the div at 100px; and if the content inside of it extends beyond 100px, it will grow. This is true in ALL BROWSERS!

Reference:
http://www.reignwaterdesigns.com/ad/tidbits/hacks/minimum_height_in_css.shtml

No comments:

Powered by Blogger.