Ensure the minimum height of a <div> tag in Internet Explorer

Being a Microsoft bigot I really love all of Microsoft's products, but I do find IE a real pain. Especially its inconsistencies with CSS.

In an attempt to catch up with my friends and collagues I'm doing more and more development work in pure CSS rather than using long winded hidden tables for structure, but I still have some way to go.

On a recent development project I needed to ensure that a <div> tag had a minimum height of 100px; but the min-height property of the style attribute on a <div> fails to work in IE. After a bit of work I found this solution. I've included the style attribute in the <div> tag but you'll be keeping this in your stylesheet.

<div>
    <div style="height:100px; float : right; width : 1px; z-index: -1;"></div>
</div>

Basically define your <div>, then prop it open with a nested <div> that floats to the right, is 1 pixel wide and sits behind the parent <div>. This will ensure your parent <div> has a minimum height of 100px; and will allow it to grow if the content exceeds this.

Author Paul Marshall

A self confessed Microsoft bigot, Paul loves all Microsoft products with a particular fondness for SQL Server. Paul is currently focusing on Web 2.0 patterns and practices and is always looking for better ways of doing things.

I love the .net platform, and I find it to be the most productive toolset I have used to date.

Comments

John S. said:

selector {

  min-height:500px;

  height:auto !important;

  height:500px;

}

http://www.dustindiaz.com/min-height-fast-hack/

22/Jun/2007 19:03 PM

Monica Chaturvedi (immcse) said:

Hey It actually works!!!

Thanks

10/Apr/2010 09:35 AM

Add Comment

Name
Comment
 

Your comment has been received and will be shown once it passes moderation.