layout templates - min vertical height

[Jayman911]

I'm using the css layout templates provided on this website:
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/
Is there a way to set a minimum height of the css layout? In the examples they all look nice because of the javascript script that fills the page with a block of text. When i take that out the footer rises all the way to the top of the page just underneath the header. In my website i have a bunch of pages that will not have alot of content and i would like to maintain a certain minimum height.
Is this possible?

Jason

[jscheuer1]

You can use the min-height property:

min-height:125px;

But, this doesn't work in IE 6 and earlier. There is a work around, something like:

height:expression(Math.max(this.offsetHeight, 125)+'px');

Other browsers will ignore this except for IE 7 which should probably be shielded from it using IE version specific conditional comments or this convention:

* html selector {
height:expression(Math.max(this.offsetHeight, 125)+'px');
}

where selector is the id or class name you wish to apply this to. Either way it must come after the initial declarations for that selector.

You could also just add empty paragraphs containing the   entity.

[Jayman911]

Thanks for the tip. The min-height parameter seems to work fine for mozilla, but the other code workaround doesn't seem to work for IE. Not sure why. Here is what i have in my css file:

----------------------------------
#contentwrapper{
float: left;
width: 100%;
min-height:525px;
}


* html contentwrapper {
height:expression(Math.max(this.offsetHeight, 125)+'px');
}
----------------------------------

Does this look right?

- Jason

[Jayman911]

It works! Fantastic. Thank you.

Those were minor oversights i should've seen - but its been a long day...

Thanks alot. :)

Jason

[jscheuer1]

Edit/ I previously deleted this post because I noticed a potential problem noted below. I am bringing it back because the problem can be worked around.

Almost, it should be:


#contentwrapper{
float: left;
width: 100%;
min-height:525px;
}


* html #contentwrapper {
height:expression(Math.max(this.offsetHeight, 525)+'px');
}

And, javascript must be active. In IE 6 locally, this will cause an active x warning at times but not for the live page. IE 7 ignores * html but should use the min-height declaration and may give the warning locally as well. Also, if you use padding, margins or border, adjustments may be needed to prevent IE 6 from locking up. For instance, with a 1px border you need to use:

this.offsetHeight-2

[Jayman911]

ok - will keep that in mind. Thank you.

- Jason