min-height of div

[fredda]

Hey,
is it possible to have a min-height value on a div?
Afaik min-height is not supported in Internet Explorer?
Is there another solution that works across all browesers?

Cheers
Frederik

[DaveWoods]

Expressions are usually used for IE6 and below and this is explained here.

http://perishablepress.com/press/200...rnet-explorer/

I also ran across this solution although haven't tried it but don't see why it wouldn't work.

#container {
  min-height:400px;
  height:auto !important;
  height:400px;
}

IE7 supports min-height, whereas IE6 and below treat the height value as a min-height anyway so in theory this should work.

[Paul O'B]

See the faq on min-height for a full explanation.

IE6 and under treat height as a minimum anyway so you can use the star selector hack and give IE6 a height and better browsers get min-height.

.test{min-height:200px;}
* html .test{height:200px}

Min-height is supported in IE7, safari1.3+, Firefox and Opera (plus most other modern browers).

[Paul O'B]

also ran across this solution although haven't tried it but don't see why it wouldn't work.

IE7 can come unstuck with that for some quirky reason so its best to use the method I gave above. I dislike the !important hack anyway as it mixes hacks in with good code

[fredda]

Thanks

[DaveWoods]

Paul, would you consider !important to be a hack? I thought it was valid code and was a way of simply altering specificity rules?

I don't tend to use it myself but have seen valid ways of using it for complex sites but admittedly, using more logical structured markup should get around using it in the first place.

[Paul O'B]

Paul, would you consider !important to be a hack?

Its a hack in the sense that its being used to supply some browsers a height:auto and IE6 is supplied height:400px. Therefore it is relying on IE6's buggy behavior to produce the effect required which in my mind is a hack

In case anyone doesn't understand what's happening then !important should over-ride any other same property settings for that element (even if later it in the html (unless !important is also applied)).

IE6 understands !important quite well in normal circumstances unless the property is in the same style block. If it meets 2 properties the same in the same rule then it discounts the first one as it assumes it's a mistake (because why would you declare something twice).

Therefore the first !important is discounted and just the last instance of the property/value is actioned. Other browsers attach importance to the property at all times and are not confused like IE. (IE7 has no problems either)

[fredda]

When I set the min-height of my wrapper section to 100% the background-image will not show properly. But when I change it back to 500px (the value it used to have) it shows just fine. The problem is that I want the wrapper and background-image to run according to the elemnts within the wrapper section. Any ideas?

[fredda]

Btw it works in IE7 but not in firefox (and other mozilla browsers) and Opera

[Paul O'B]

When I set the min-height of my wrapper section to 100% the background-image will not show properly. But when I change it back to 500px

Without any code yo go on we are just guessing here. It sounds like you haven't cleared the floats or are using the min-height incorrectly.

You can only use a 100% value if the parent of the element has a real height. If the parents height is based on its content then its height is auto which means that the 100% height of the child collapse to auto also. If the parent therefore has no height then neither does the child.

When you set min-height to 500px then you are giving it an exact height and it will obey.

If you have a link or some code we could advise better

[fredda]

Sorry about that
http://www.frederikvig.com/test/index.html

Style:
http://www.frederikvig.com/test/styles/master.css

Cheers
Frederik

Works fine in IE7.0.

[Paul O'B]

HI,

As I guessed above you haven't cleared the floats. See the faq on floats for clearing techniques and an exmplanation.

You can either add overflow:auto here:

#ormament-bottom {
    background-image: url(http://www.frederikvig.com/test/images/ormament2.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    width: 859px;
    z-index: 10;
overflow:auto    
}

Or add a clearer in the html:

                <div id="content-box-bottom"></div>
            </div>
          <div style="clear:both;height:1px"></div>
        </div>
    </div>
    <div id="footer">
        <p>Copyright etc here 
    </div>

Read the faq on floats for other methods and why you need to do this.

[fredda]

Cheers! works like a charm