Cross browser minimum height or minimum width. Most of you will already know this little trick to give your website/element a min-height or a min-width. There are a lot of techniques to make it work, but this one is the easiest and it’s a good reminder for myself when I need the use this hack.

min-height


.minHeight {
min-height:400px;
height: auto !important;
height: 400px;
}


min-width


.minWidth {
min-width:300px;
width: auto !important;
width: 300px;
}


I don’t use the min-width a lot, but the min-height is really useful for example to keep an element the same height when it has less content.

Older IE versions doesn’t support min-height or !important. The browser sees height: auto, then height:300px. Height works fine in these older IE versions. When there is more content then the 300px height the element will just expand. So you use the misunderstanding from IE to your advantage.