Min-height for Safari

The following 4 divs should all be at least 100px high.

hello

hello

hello

hello

hello

hello

hello

hello

hello

hello

hello

This is all we should really need:

.expand_height
	{
	min-height: 100px;
	}

Unfortunately IE Win and Safari don't support the min-height property.

IE Win

The fix for IE Win is easy and well known. IE Win wrongly expands the height of an element beyond what it has been explicitly set to and so all we need to do is just set the height to be the value desired for min-height and make sure that only IE Win can see that declaration

* html .expand_height
	{
	/*\*/ height: 100px; /* don't let IE Mac see this */
	}

Safari

As of version 1.x??, Safari has supported the :before and :after pseudo elements which enables min-height to be emulated in Safari by:

body:last-child .expand_height:before
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]';
	float: right;
	height: 100px;
	width: 0;
	visibility: hidden;
	}
.expand_height:lang(en):before
	{
	content: '' !important;
	}
.expand_height:after
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	margin: 0;
	}

Since the only other browsers that support content generation also support min-height, eveything should be just hunky dory, right? Wrong. As you probably guessed from the CSS code above.

Mozilla/Firefox has some sort of bug that which prevents the generated content having the float applied to it - this is reason for .expand_height:lang(en):before declaration. Essentially it clears Mozilla's palette by removing the generated content since it's unnecessary in any case - after all Mozilla has no problems with min-height.

Opera (well 7.54 in any case) has its own problem. If the last element within the min-heighted element does not have its margin-bottom set to 0, Opera adds that margin on to the height of the element. One fix is, of course, to somehow explicitly set the margin-bottom to 0. The other way, as done here, is to prevent Opera seeing the initial :after declaration. Which is what the body:last-child preceding .expand_height:before achieves.

.expand_height:after causes no trouble - however it points up a potential flaw in the method. If a contained floated element should protrude from the min-heighted element, the generated float clearer makes that an impossibility. At that point you'll have to look elsewhere for a solution.

The sharper readers will have spotted that the hack for getting Mozilla/Firefox to play ball relies on there being a lang property set. This is, as far as I know, the only valid way to distinguish between Safari and Mozilla. If there is no lang property to hang the hack off, a non-valid method (ie the star hack) will have to do. Show the non-valid version

IE Mac 5

Because IE Mac doesn't support min-height or generated content, this method doesn't work there. If this is a show stopper for you, check out the links in the See also section.

See also

CSS Stuff index