Enforcing a minimum height for block elements in HTML is one of those few CSS tricks that you can’t live without. There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser-conditional style sheets to get the desired effect.
Many of the different methods work well, but after trying a number of them, I can say that the following method is the easiest to use and is compatable across all common versions of Firefox, Safari, and IE. Many of you are probably already using this method—it’s not new—but for those of you who aren’t, give it a try. It should save you a lot of headaches.
Cross Browser min-height
.foo {
min-height:100px;
height: auto !important;
height: 100px;
}
This works because all of the more recent browsers will understand and respect the min-height setting as well as the !important designation. So in the example above, the block will be given the min-height setting you specify, and the height:auto will take precendence over the height:100px, even though it appears earlier in the code. With content shorter than 100px, the min-height setting is observed, and with content that is longer, the block is sized to fit the content.
In the case of older versions of IE, neight the min-height parameter nor the !important designation are supported. Instead, the browser essentially sees a height:auto, immediately followed by a height:100px, and the latter takes precendence. Lucky for us, height parameter in older versions of IE function exactly like the min-height parameter. When content expands past the size of the element, it grows to accommodate it. When content is shorter, the specified height is respected.
I don’t find myself using it as much, but this also works with min-width:
Cross Browser min-width
.bar {
min-width:100px;
width: auto !important;
width: 100px;
}
ADVERTISEMENT
