Question

.divTest { 
    min-height: 500px; 
    height: auto !important; 
    height: 500px; 
}

I have got this following CSS code, I tested it on http://www.cleancss.com/ and it took out the height: 500px. Any reasons why that happened?

Answer 1

!important commands take over any other… so your height:500px; line will always be ignored (which is why the optimizer took the line out).

If you want your div to have a height of 500px only then your CSS should just be:

.divTest {
    height:500px;
}

If you want your div to have a varying height, no smaller than 500px then your CSS should be:

.divTest {
    min-height: 500px;
    /* height:auto; - implied */
}

You don’t need the !important for this css-fragment, unless there’s some other rule that’s effecting the height and you need to override it. You don’t need to specify height:auto because that’s the default style for a div (unless of course you’re inheriting something else ;))

If you’re using IE6 there’s a work around:

.divTest {min-height:500px;}
* html .divTest {height:500px;}