height: auto; doesn't work with firefox

Question

I have Div Container with css class:

    .content4
   {
    height: 1400px;
    width: 920px;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    padding-bottom: 25px;
    padding-top: 25px;
    background-image: url(../images2/bg.gif);
   }

and i need to make it auto height for its content

its working properly in IE but doesn't work in firefox.

any help please?

Answer 1

If I understood the case correctly, your style is working like it should (in FF, of course :)) If you specify the particular height, the div should not change its height when its content wants more. What you observe in IE is that it's actually treating a "height" as a "min-height". The solution here is to specify min-height for browsers, and height for IE :)

Answer 2

Use something like that:

.test
{
     min-height: 300px;
     height: auto !important;  /* for other browsers */
     height: 300px;  /* for IE */
}