min-height not working...

[LouPhi]

I have a #content DIV with a min-height set as follows:

#content {
margin-top:0px;
padding-bottom:5px;
position:relative;
padding-top: 3px;
min-height: 450px;
padding-left: 2px;
clear: both;
_height: 450px;
}
* html #content {
height: 450px;
overflow: visible;
}

This DIV has sub-DIVs (content-left and content-main)....

#content div {
float:left;
}
#content-left {
width:145px;
top:0;
left:0px;
padding-left: 5px;
}
#content-main {
position:absolute;
top:0;
right:0;
margin-left:2px;
width:630px;
margin-right: 4px;
padding-left: 10px;
}

The #content-main DIV is the one which is likely to have stuff in it which would force the page to grown.... such as http://www.magickingdom.co.uk/dev/leaflets.php

The list as you can see it now, is about 6 items longer... but they're disappearing behind the #footer DIV (in Firefox) and just jump below the #footer DIV (in IE).

Can anybody give me a pointer as to how I can rectify the min-height problem, do I need to apply this to the content-main DIV instead (I tried this but then the content-left stuff went all squewed)??

Any ideas??
LP

[Centauri]

With absolute position applied to #content-main, it will not force the size or position of anything, but simply overlay on top ...

[opifex]

to start with, the property "_height· doesn't exist. the "underscore hack" is a “alternate IE settings” call that may or may not work (in this case your * hack overrides it) and will NOT validate.

one of the surest ie css hacks for min-height is

#content {
min-height:450px;
height:auto !important;
height:450px;
}

[LouPhi]

Thanks for your help both...

With regard to the response from opifex, I realise the _height was a hack, but it was the only thing that would work in IE at the time (and was a piece if info gathered from someone on this forum I think?!)... anyway, thanks for the ie css hack/fix, but I've tried using this and its not working so I may be putting it in the wrong place. My CSS for the #content DIV is:

#content {
margin-top:0px;
padding-bottom:5px;
position:relative;
padding-top: 3px;
min-height: 450px;
padding-left: 2px;
clear: both;
_height: 450px;

}
* html #content {
height: 450px;
overflow: visible;
}

Should I replace the #content or *html #content part with your fix? Where exactly should it go?

Thanks very much again
LouPhi

[drhowarddrfine]

Which IE? min-height doesn't work in IE<7 and is buggy in IE7. Also, you have mismatched html tags and some css errors.

[LouPhi]

What do you mean by mismatched HTML tags? I'll check out the CSS for errors, although definitely not an expert, relatively new to CSS so if you would like to put me out of my misery and suggest what errors I have made... I will gladly look to put anything right that I need to.