The Countdown to Maker Faire Bay Area is On!


Easiest cross-browser CSS min-height


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 {
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 {
width: auto !important;
width: 100px;

14 thoughts on “Easiest cross-browser CSS min-height

  1. Angel says:

    hey i was wonderin if youd b able to sell me one or explain how to make one or send me instructions or make a video or sumtin lol if not thanks anyways

Comments are closed.

Discuss this article with the rest of the community on our Discord server!
Maker Faire Bay Area 2023 30% off early bird ticket sales ends August 31st, 2023!

Escape to an island of imagination + innovation as Maker Faire Bay Area returns for its 15th iteration!

Prices Increase in....